The CSS minmax() function constrains a grid track between a minimum and maximum size. With minmax(200px, 1fr), each column stays at least 200px wide while sharing available space. section 5.4
Responsive portfolio columns
Use grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); to fit as many columns as the available width allows without making any column narrower than 200px. Wider screens fit more columns; narrower screens fit fewer. section 5.4
Keep these behaviors in mind:
- The first argument supplies the minimum size and the second supplies the maximum. section 5.4
- If the maximum is smaller than the minimum, the maximum is ignored. section 5.4
- auto-fill may create empty tracks when there are not enough grid items to occupy them. section 5.4
Listing 5.9 A grid with implicit grid rows
body {
background-color: #709b90;
font-family: Helvetica, Arial, sans-serif;
}
.portfolio {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); #1
grid-auto-rows: 1fr; #2
grid-gap: 1em;
}
.portfolio > figure {
margin: 0; #3
}
.portfolio img {
max-inline-size: 100%;
}
.portfolio figcaption {
padding: 0.3em 0.8em;
background-color: rgb(0 0 0 / 0.5); #4
color: #fff;
text-align: right;
}
Inspect a complete portfolio rule using repeat(), auto-fill, minmax(), and implicit grid rows. section 5.4
