This article describes really well how to make a responsive grid with CSS Grid:
How to make your HTML responsive by adding a single line of CSS
Per for Scrimba ・ Jun 12 '19 ・ 5 min read
But we can add one final ingredient to make that CSS line even better.
In the article, the minimum width of the grid items is set to 100px
. This means that if the availabe size of the grid container is narrower than 100px
, the grid items will overflow. This is quite unlikely to happen with a minimum width of only 100px
. But the higher that number, the more likely the columns is to overflow on small viewports.
Cutting edge CSS to the rescue!
Instead of having to resort to a media query, we can use: the CSS function min()
, which is now widely supported.
.container {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
min()
accepts one or more values and returns the smallest value. As soon as the full width of the columns is narrower than 300px
, the columns will observe the 100%
CSS declaration and shrink below 300px
.
For a better understanding of the issue and of its solution with the min()
function, I highly recommend reading this article:
https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/
Top comments (0)