CSS Grid replaced countless JavaScript layout hacks. At Google, Grid is our go-to for any 2D layout challenge.
Grid vs Flexbox
Flexbox: 1-dimensional (row OR column). Grid: 2-dimensional (rows AND columns simultaneously). Use Flexbox for components, Grid for page layouts.
The Fundamentals
Responsive Without Media Queries
Advanced Techniques
Subgrid
Lets child grids align to the parent grid's tracks. Game-changer for card layouts where you need content to align across cards.
Dense Packing
Common Gotchas
1frrespects content size — useminmax(0, 1fr)to truly divide space equally- Grid items stretch by default — use
place-self: startto prevent it - Grid areas must form a rectangle — L-shapes won't work