Flexbo saysCSS Grid lays out in two dimensions at once — rows and columns together.
Where flexbox is one axis, display:grid manages rows and columns simultaneously. You define a track template and place items into the resulting cells. Grid is the right tool for page layouts, card galleries, and any genuinely two-dimensional arrangement.
Power-ups you unlock
display:grid manages rows + columns together
Define tracks, then place items in cells
Best for two-dimensional layouts
Pairs with flexbox (grid page, flex components)
The Float Phantom attacks — common mistakes
Forcing grid for one-dimensional rows (flex is simpler)
Forgetting to set the column template
Thinking grid replaces flex (they complement)
Boss battleMake a 3-column grid of cards with display:grid and a gap.