Responsive layouts without media queries
Auto-fill automatically creates as many tracks with the desired width that we specify as fit into the container. In this case, that's 10 tracks, because 2,000 divided by 200 is 10.
.container {
display: grid;
max-width: 2000px;
grid-template-columns: repeat(auto-fill, 200px);
}
Auto-fit, it still creates these 10 columns, but then collapses the ones that are empty to have a width of zero.
.container {
display: grid;
max-width: 2000px;
grid-template-columns: repeat(auto-fit, 200px);
}
This allows us to use the minmax function. The grid cells can be provided with a minimum and maximum width. In our case it should be at least 200 pixels, (minimum) but it can be up until one fractional unit (maximum).
.container {
display: grid;
max-width: 2000px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
So this trick with auto-fit and then the minmax between a fixed number and a 1fr, we can build our layouts, which will then automatically adapt to the screen size without us having to worry about anything, without having to write any media query.
