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.)
Thanks for the tip! ⚡
I dig. Interesting idea. At what point do you have blow outs with the original code?
This gets into that:
Asking here rather than the blowout page on the off chance the traffic here will turn up an answer. Is there a way to trigger a blowout? Particularly based on row position? There’s a layout I’d like to achieve and I’ve so far been unable to accomplish it. I have two components:
Fixed width image. It can shrink to the viewport but I don’t want it to shrink in a multicolumn grid.
Dynamic text content/dynamic width. It can flow/wrap to the viewport, but I don’t want it to wrap in a multicolumn grid.
I want to achieve this layout without a media query if possible, due to the dynamic nature of the second component.
The layouts I want are:
Wide enough for multicolumn, spaced with a gap minmax(20px, 1fr), each component flush to its respective container edge:
Too narrow for multicolumn, each component centered:
This seems like it should be achievable with either Grid or Flex but I gave up after… a lot of different approaches.
I’m not sure if triggering a blowout could accomplish this, but it feels possible? I’ve also tried repeating columns which felt promising, but I couldn’t find a way to keep the sizing constraints on the components as stated.
If anyone has a solution I’ll buy you a beer!