Getting columns to wrap in CSS Grid

Question

How can you specify the maximum number of columns when using display: grid;, with it automatically breaking when the content becomes too wide for the space (or

Answer 1

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>

jsFiddle demo

Notes:

The auto-fill function allows the grid to line up as many grid tracks (columns or rows) as possible without overflowing the container. This can create similar behavior to flex layout's flex-wrap: wrap.

The minmax() function allows you to set a minimum and maximum size range for a grid track. In the code above, the width of column tracks will be a minimum of 100px and maximum of whatever free space is available.

The fr unit represents a fraction of the available space. It is similar to flex-grow in flex layout.