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 smaller than a minimum size)? Is there a way to do this without media queries?

For example, I have the following which won't break into a single column mode when there is not enough room for the content.

#grid {    display: grid;    grid-template-columns: repeat(2, 1fr);    grid-gap: 1em;  }    #grid > div {    background-color: #ccddaa;  }

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

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.