23
CSS Grid gap spacing in Firefox keeps tripping me up
I noticed like 3 devs this month alone posting layouts where their grid gap is set to 0 but they expect spacing to magically appear. Firefox actually shows the gap differently than Chrome sometimes and it drives me nuts. For example I had a 12 column grid last Tuesday where the gap looked fine in Chrome but Firefox squished everything together. It took me 30 minutes to realize I forgot to set a gap value on the container. Does anyone else have a mental checklist they run through before blaming the browser?
2 comments
Log in to join the discussion
Log In2 Comments
kim.hannah6d ago
The thing that finally clicked for me was when I noticed Firefox shows grid gaps differently in the inspector tool vs the actual rendered page. I had a 12 column layout too with a 20px gap and Firefox showed everything overlapping until I opened DevTools and saw the gap value was actually 0 in the computed styles. My mental checklist now is first check the container has a gap set, then check if I accidentally used `column-gap` when I meant `grid-gap` (happens more than I want to admit). Also I always toggle the grid overlay on in Firefox now before panicking, it shows you the gap lines in blue which makes it super obvious if there's space missing. That inspector tool is honestly the main reason I keep Firefox open for layout debugging even though Chrome is my daily driver.
5