CSS Grid Layout

While flexbox is great for arranging items in a single row or column, CSS Grid is built for true two-dimensional layouts rows AND columns at once, like a real grid or spreadsheet. Set display: grid on a parent to activate it, then grid-template-columns defines how many columns exist and how wide each is: grid-template-columns: 1fr 1fr 1fr creates exactly three equal-width columns, where fr (fraction unit) means 'one share of the available space' 2fr 1fr would make the first column twice as wide as the second. gap adds consistent spacing between both rows and columns at once, just like in flexbox. Grid shines for whole-page layouts (header, sidebar, main content, footer, all defined at once) or card galleries where items need to align neatly in both directions something flexbox alone struggles to do cleanly when rows don't have matching numbers of items.