Debugging CSS Grid Layouts
How to debug CSS Grid using the DevTools grid inspector, fix implicit-track surprises, and build grids that reflow cleanly on mobile.
7 min read - Updated 2026-06-15
Use this guide as a compact release reference, then validate the same breakpoints in Sizzy with synchronized devices and screenshot evidence.
Implicit tracks cause silent surprises
When grid items exceed your explicitly defined tracks, the grid creates implicit tracks sized by grid-auto-rows or grid-auto-columns - often not what you intended. Items can land in unexpected places, especially with auto-placement. Making the track definitions and placement explicit removes most grid mystery.
Extra items create implicit tracks you didn't define
grid-auto-rows/columns control implicit track size
Auto-placement can move items unexpectedly
Explicit grid-template plus placement removes surprises
Master the responsive grid patterns
Two patterns cover most responsive grids. repeat(auto-fit, minmax(min, 1fr)) creates a fluid grid that wraps automatically without media queries. minmax() prevents columns from getting too narrow. Learning these means many grids become responsive with a single line instead of a stack of breakpoints.
repeat(auto-fit, minmax(220px, 1fr)) for fluid wrapping
auto-fill vs auto-fit changes empty-track behavior
minmax() sets sensible min and max column sizes
gap replaces margin hacks for spacing
Use the grid inspector across widths
DevTools' grid overlay numbers lines and shows track sizes and gaps - essential for understanding placement. Because grids reflow at breakpoints, check the grid on several widths together to confirm columns collapse cleanly. Sizzy shows the grid on phone, tablet, and desktop simultaneously so you can verify auto-fit wrapping and explicit reflows at a glance.
Enable the grid overlay to see lines and track sizes
Confirm gaps and alignment match the design
Verify auto-fit grids wrap correctly as width shrinks
Compare the grid across breakpoints side by side
Release checklist
Track definitions and item placement are explicit.
Implicit-track sizing is intentional, not accidental.
Fluid grids use auto-fit/auto-fill with minmax().
Grid reflow is verified across breakpoints at once.
Frequently asked questions
Why are my grid items in the wrong place?
Items beyond your explicit tracks trigger implicit tracks and auto-placement, which can position them unexpectedly. Define your tracks and item placement explicitly, and control implicit sizing with grid-auto-rows or grid-auto-columns.
How do I make a CSS grid responsive without media queries?
Use repeat(auto-fit, minmax(min, 1fr)). The grid automatically fits as many columns as will fit and wraps the rest, with minmax keeping columns from getting too narrow - no breakpoints required.
What's the difference between auto-fit and auto-fill?
auto-fill keeps empty tracks in the row even when there aren't enough items, while auto-fit collapses empty tracks so existing items stretch to fill the space. auto-fit is usually what you want for content grids.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.