CSS Grid: two dimensions at once
Where flexbox handles one axis, Grid handles two at once. You declare rows and columns upfront and children snap into cells. This is the right tool for dashboards, card grids, and any layout with a true two-dimensional shape.
Read that single rule carefully. repeat(auto-fit, minmax(250px, 1fr)) tells Grid to fit as many columns as can each be at least 250 pixels wide, and to let them each take up to one fraction of the remaining space. No media queries, no breakpoints, and the layout adapts to every screen automatically. One of the most powerful one-liners in CSS.
Validation checklist: Build a responsive grid yourself
Loading practice…
Quiz: Quiz
Loading practice…