There are a lot of grids on the web like this:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
My message is that what they really should be is:
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(10px, 1fr));
}
Why? In the former, the minimum width of the grid column is min-content
, which can be awkwardly wider than you want it to be (see: grid blowouts). In the latter, you’ve reduced the minimum to 10px
(not zero, so it doesn’t disappear on you and lead to more confusion).
While it’s slightly unfortunate this is necessary, doing it leads to more predictable behavior and prevents headaches.
That’s it. That’s my whole message.
(Blog post format kiped from Kilian’s “You want overflow: auto, not overflow: scroll” which is also true.)
The post You want minmax(10px, 1fr) not 1fr appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
About us and this blog
We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.
Request a free quote
We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.
Subscribe to our newsletter!
More from our blog
See all postsRecent Posts
- How to Animate the Details Element March 3, 2021
- The State Of Mobile And Why Mobile Web Testing Matters March 3, 2021
- The Best Font Loading Strategies and How to Execute Them March 3, 2021