CSS Grid Basics

Build two-dimensional layouts with rows and columns using CSS Grid.

Step 1 of 7

Why CSS Grid exists

Flexbox handles one-dimensional layout beautifully, but what about organizing content in rows AND columns simultaneously? That's where CSS Grid comes in. It lets you define a complete two-dimensional grid structure and place items precisely within it. You'll recognize grid layouts everywhere: Pinterest's masonry layout, any dashboard with card widgets (like Notion), photo galleries on Instagram's profile page, and CSS-Tricks' article grid.

Think of it this way: If flexbox is a single shelf where you arrange items in a line, CSS Grid is an entire bookcase — you define how many rows and columns it has, and then place books exactly where you want them.

Web Standard

Grid and Flexbox are complementary, not competing. Use Flexbox for one-dimensional layouts (a row of buttons, a vertical stack). Use Grid for two-dimensional layouts (a page layout with sidebar and main content, a card grid). Many real layouts use both.

Learn more on MDN

CSSCSS Grid Layout CSSdisplay: grid