Flexbox is great for one-dimensional layouts — a row or a column. But what if you need to control both rows and columns at the same time? That is where CSS Grid comes in.
Grid is a two-dimensional layout system. You define rows and columns together, and then place items wherever you want in that grid. It is like having graph paper for your page.
Grid vs Flexbox
Think of it this way: flexbox is for content-first layouts. The items determine how the space is distributed. Grid is for layout-first designs. You define the grid first, then place items into it.
Use flexbox for navigation bars, card rows, centering things. Use grid for page layouts, image galleries, dashboards — anything where you need control over both rows and columns.
.container {
display: grid;
}
That is all it takes to turn any element into a grid container. The difference from flexbox is subtle at first — the real power comes when you start defining columns and rows.
Try it Yourself →The Grid Mindset
When you use grid, think in terms of lines. A grid with three columns has four vertical lines. A grid with two rows has three horizontal lines. You can place items by referencing those lines, or by naming areas. We will cover both approaches.
The key takeaway: flexbox is a single dimension at a time. Grid is both dimensions at once. They complement each other — most modern layouts use both together.