DEV Community

Jérôme Pott
Jérôme Pott

Posted on • Edited on

3 3

Truly Responsive Grid with CSS Grid

This article describes really well how to make a responsive grid with CSS Grid:

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));
}
Enter fullscreen mode Exit fullscreen mode

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/

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more