With the repeat()
and auto-fit
/ auto-fill
functions it's easy to get grid items to wrap when there is a defined length pattern for the columns or rows.
In the example below, all columns are a minimum width of 100px and maximum width of 1fr.
#grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 1em;
}
#grid > div {
background-color: #ccddaa;
padding: 10px;
}
<div id="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
See Question&Answers more detail:os