Select Page

Category: grids

Preventing a Grid Blowout

Say you have a very simple CSS grid layout with one column fixed at 300px and another taking up the rest of the space at 1fr. .grid { display: grid; grid-template-columns: 1fr 300px; } That’s somewhat robust. That 1fr column will take up any remaining space left behind by the fixed 300px column. It’s true that the auto value would do the same, but auto isn’t quite as robust since it’s size is based on the content inside. So, if you had too little content, then your column might not fill the entire space you want it to. But...

Read More

Don’t use empty or low content for your design system grid examples

Dave and I had Jen Simmons on ShopTalk the other day. Jen was talking about Intrinsic Web Design and how one of the core tenets of it is grids with rows and columns that don’t necessarily change at the same rate or ones that have essentially different rules for how they behave. For example, take this (contrived) grid setup: .grid { display: grid; grid-template-columns: 1fr minmax(50px, 100px) 20% auto; } Each of those columns will behave differently. I’m just wrapping my head about this, and definitely don’t fully understand it. Here’s what it seems like to me, numbered 1-4 based on the “strength” (I guess?) of the width. .grid { display: grid; grid-template-columns: 1fr /* #4 - Weakest, will fill remaining space */ minmax(50px, 100px) /* #3 - Will only start changing when other columns force it */ 20% /* #1 - Definite size, steady */ auto /* #2 - Indefinite size, entirely based on content, pushy */ ; } This is much different from quite a long history of how we’ve set up grid columns in the past. Float-based grids typically use percentages (a definite size) to set columns. Same with inline-block-based grids, typically. Even with grid, if you set up all your columns with all percentages or all fractional units, you’d likely have a steady grid in which the content inside won’t mess with sizing. But Jen...

Read More

Aspect Ratios for Grid Items

We’ve covered Aspect Ratio Boxes before. It involves trickery with padding such that an element’s width and height are in proportion to your liking. It’s not an ultra-common need, since fixing an element’s height is asking for trouble, but it comes up. One way to lower the risk is The Psuedo Element Tactic, in which a pseudo element pushes its parent element to the aspect ratio, but if the content inside pushes it taller, it will get taller, aspect ratio be damned. You can use that technique in CSS grid with grid items! Although there are a couple of...

Read More
000webhost logo