Pro tip: that 3 line grid trick broke on Safari 17.3, here's the fix

Someone in a YouTube comment said to use grid-template-rows with 1fr and minmax(0,1fr) for equal height cards, which worked perfectly in Chrome but completely collapsed in Safari on my iPhone last Tuesday. Switching to subgrid for the inner content fixed it in about 10 minutes, but has anyone else hit weird Safari-only grid quirks that made you doubt the whole trick?

1 comments

1 Comment

sam_harris6816h agoTop Commenter

Read a post from a CSS guy on Mastodon last week about how Safari handles overflow on grid items differently than Chrome. He said Chrome treats the grid container as the limit, but Safari sometimes lets content push past it unless you force min-height: 0 on the items. That matches what you ran into. I had a similar issue with a card layout where the footer inside each card kept getting pushed off screen in Safari, but only on older versions. Subgrid fixed it for me too, but it took a while to figure out because the same code looked perfect in Firefox. These little browser differences make you second guess every layout tip you read online.