在响应式布局中占用尽可能少但仍然合理的空间

Question

I am programming a quantity selector button and want it to be responsive. That is, I want the minus and plus to contain only as much width as the icons need and the input in the middle to be the maximum width.

I am wondering how to approach this using scss.

HTML:

<div class="quantity-select-container">
   <div class="btn btn-minus">
      <span class="icon icon-minus">
      </span>    
   </div>

   <input value="1" type="number" min="1" max="100" step="1" pattern="[0-9]*" class="form-control product-detail-quantity-select">

   <div class="btn btn-plus">
      <span class="icon icon-plus"></span>    
   </div>
</div>

SCSS:

.quantity-select-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0 0;
  border: 1px solid black;
  grid-auto-flow: row;
  grid-template-areas: "minus input plus";

  .btn-minus {
    grid-area: minus;
  }

  input {
    text-align: center;
    grid-area: input;
    padding: 2px;
    width: 100%;
  }

  .btn-plus {
    grid-area: plus;
  }

  .btn-minus,
  .btn-plus {
    cursor: pointer;
    display: flex;
    justify-content: center;
  }
}

grid-template-columns: 45px auto 45px; can solve this problem, but not effectively because with a narrow screen the buttons overlap and obscure the input, therefore it works with large screens while in doesn't on tiny screens

Answer 1

min-content with clamp are your best friends when it comes to fitting some boxes to its smallest width possible on small screens while maintaining a reasonable width when there's enough space on screen

 #grid{ grid-template-columns: min-content 1fr min-content; display: grid; font-size:25px; } #grid > *{ display: flex; justify-content:center; padding-block: 5px; }.to-shrink{ background:red; padding-inline: clamp(2px, 3vw, 30px); }

 <div id="grid"> <div class="to-shrink">smol</div> <div>bigg</div> <div class="to-shrink">smol</div> </div>

For a better illustration what does this combo do, check the gif below and notice how paddings are changing due to clamp :

To go further, you can also apply clamp to the font or, in your case, size of the icon itself, while still keeping min-content on grid layout