Vist a

The final ingredient we need in order to fix this is called minmax(). We’ll simply replace 100px with minmax(100px, 1fr). Here’s the final CSS.

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);

Notice that all the responsiveness happens in a single line of CSS.

This results in the following behavior:

And as you can see that works perfectly. The minmax() function defines a size range greater than or equal to min and less than or equal to max.

So the columns will now always be at least 100px. However if there are more available space, the grid will simply distribute this equally to each of the columns, as the columns turn into a fraction unit instead of 100 px.


Leave a comment

Your comment