0
Just found a hidden CSS Grid layout trick that saved my footer
I was messing with a footer layout last week for a client site and could not get three uneven columns to line up right. I tried flexbox and float hacks for like an hour and nothing stuck. Then I remembered a post from 3 years ago about using grid-template-rows with auto heights. So I set the footer up as a grid with three columns and just let the row size auto follow the tallest column. It worked perfect on the first try. I also added gap: 1rem to keep spacing clean without margin tricks. Has anyone else had an issue where subgrid would have made this even easier, or is that still too experimental for production?
3 comments
Log in to join the discussion
Log In3 Comments
river_wright6d ago
Safari actually broke my subgrid test last year, so I stick with plain grid for production stuff.
4
cole_mitchell572d agoRising Star
Yeah I had the same issue. Firefox was fine but Safari just ignored subgrid completely. Now I just use nested grids with gap values. It's more code but at least it works everywhere.
7