CSS Grid Wrapping

CSS grid wrapping

Use either auto-fill or auto-fit as the first argument of the repeat() notation.

<auto-repeat> variant of the repeat() notation:

repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

`auto-fill`

When auto-fill is given as the repetition number, if the grid
container has a definite size or max size in the relevant axis, then
the number of repetitions is the largest possible positive integer
that does not cause the grid to overflow its grid container.
^{https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Getting columns to wrap in CSS Grid

Neither HTML or CSS have any concept of when descendants of a container wrap.

Essentially, the browser renders the document during an initial cascade. It does not reflow the document when a child wraps.

Therefore, to change the number of columns, you will need to set a width limit somewhere along the line or use media queries.

Here's a more in-depth explanation: Make container shrink-to-fit child elements as they wrap

If you can define a column width, then grid layout's auto-fill function makes wrapping easy.

In this example, the number of columns is based entirely on the width of the screen:

#grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* see notes below */  grid-gap: 1em;}
#grid > div {  background-color: #ccddaa;}

<div id="grid">  <div>text</div>  <div>text</div>  <div>text</div>  <div>text</div>  <div>text</div>  <div>text</div>  <div>text</div>  <div>text</div>  <div>text</div></div>

Wrapping css grid and streching one grid item to take up all empty columns

It can be achieved with display: flex. In addition, it is necessary to use flex-grow property.

As mdn says about flex-grow:

The flex-grow CSS property sets the flex grow factor of a flex item's
main size

* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-element {
  width: 10%;
  border: 1px solid #000;
  flex-grow: 1;
  min-height: 120px;
  box-sizing: border-box;
  margin: 0 5px 10px;
  justify-content: space-between;
  text-align: center;
}

<div class="flex-container">
    <div class="flex-element">
      1
    </div>
    <div class="flex-element">
      2
    </div>
    <div class="flex-element">
      3
    </div>
    <div class="flex-element">
      4
    </div>
    <div class="flex-element">
      5
    </div>
    <div class="flex-element">
      6
    </div>
    <div class="flex-element">
      7
    </div>
  </div>

CSS grid with auto-sized auto-filled rows

This requirement leads to contradictory scenarios:

Let's say there are 6 cells with the following lengths in that particular order:

11111, 2, 3, 44444, 5, 6

3 columns → width: 7
```
|11111|2|3|
|44444|5|6|
```
2 columns → width: 10
```
|11111|2    |
|3    |44444|
|5    |6    |
```

⚠️ Reducing the number of columns for smaller screens would result in a wider grid in that case and it wouldn't fit any more.

This is at least one reason why the layout of such a grid could be a complex task, is not supported by CSS and why it is probably not a good idea in general.

Suggestions (CSS-only):

Manually define the number of columns for each screen size using media queries
or just use flex-wrap and make all cells the same width if they should align.

CSS Grid Wrapping