Loading…
26
Can we talk about the CSS Grid mess on the new transit site in Portland?
Was poking around the TriMet trip planner page last week and their schedule grid totally falls apart at 900px. Cards overlap, columns jump, it's a wreck. I opened dev tools and they're using grid-template-areas with hardcoded pixel rows instead of minmax. How do you all handle breakpoints when your grid areas shift layout?
1 comments
Log in to join the discussion
Log In1 Comment
noah_black9d ago
Why are people still hardcoding pixel rows in grid at all? I watched a talk from a CSS conf last year where the guy showed this exact TriMet kind of bug, grid-template-areas with fixed row heights so everything shoves into each other once the viewport shrinks. He said the fix is to ditch the pixel rows and use minmax plus auto-fit so the tracks breathe on their own. Honestly his demo convinced me that most of these breakpoint headaches go away if you stop forcing the grid into a rigid shape. Now I write my area names but let the row sizes be flexible and it holds together way better down at 900px and even lower.
3