How to make your HTML responsive by adding a single line of CSS

Per for Scrimba ・ Jun 12 '19

#html #css #cssgrid

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/