Search code examples
csscss-grid

Auto Grid columns, without wrapping to next row

I want this 3 boxes to display next to each other, with same width of 381px

Their parent is .boxes and they are .box

enter image description here

I can do that with the following on parent:

.boxes {
   display: grid;
   grid-template-columns: repeat(3, 381px);
}

BUT:

If in future I want to add one more box, I want that .box to also be 381px wide.

I don't want to specify number 3, I want it to be infinite columns of 381px if new box appears

I want to achieve same result as:

grid-template-columns(auto-fit, 381px);

But I don't want them to wrap to next row if they can't fit.

Is it possible?

Solution

  • You simply make the flow to be column like below:

    .boxes {
  display: grid;
  grid-auto-columns: 381px;
  grid-auto-flow: column; /* this will do the trick */
  grid-gap: 10px;
}

.boxes>* {
  height: 50px;
  background: red;
}
    <div class="boxes">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>