How to Use CSS Grid for Layouts

CSS Grid is the right tool when you need a real two-dimensional layout, meaning you control rows and columns at the same time. Set display: grid on a container, define your columns, and the children flow into a structured grid. Here is how it works and when to reach for it.

Grid vs Flexbox

The quick rule: Flexbox is one-dimensional and Grid is two-dimensional. Flexbox lays items out along a single axis, a row or a column, and is great for toolbars, button groups, and centering. Grid lays items out across rows and columns together, which is what you want for page layouts, dashboards, and card galleries. They work well side by side: Grid for the overall structure, Flexbox inside individual cells.

Defining columns and rows

You declare tracks with grid-template-columns and grid-template-rows. The star of Grid is the fr unit, which means a fraction of the leftover space.

.layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 16px;
}

That makes three columns where the middle one is twice as wide as the outer two, with a 16px gap between every track. gap replaces the old margin hacks and only adds space between cells, never around the outside edge.

Two helpers make this cleaner. repeat() saves you from typing the same value over and over, so repeat(3, 1fr) equals 1fr 1fr 1fr. And minmax(min, max) sets a floor and a ceiling for a track, for example minmax(200px, 1fr) means “never smaller than 200px, otherwise share the free space.”

Placing and spanning items

By default each child takes one cell. To make an item cover more, use grid-column and grid-row with a span or explicit line numbers.

.hero {
  grid-column: span 2; /* cover two columns */
  grid-row: 1 / 3;     /* from line 1 to line 3 */
}

This is how you build feature tiles, sidebars, and headers that stretch across a layout without nested wrappers.

Responsive grids with auto-fit

The most useful pattern for card grids needs no media queries:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

Here auto-fit packs in as many columns as fit, each at least 200px wide, and 1fr lets them stretch to fill the row. Resize the window and the column count adjusts on its own. Use auto-fill instead of auto-fit when you want empty placeholder tracks to be kept rather than collapsed, so existing cards do not stretch to fill the gaps.

Build it visually

Guessing track values gets tedious. Use the CSS Grid Builder to drag out columns and rows and copy clean CSS:

Open the CSS Grid Builder and set your number of columns and rows.
Adjust each track using fr, pixels, or minmax() until the proportions look right.
Set the gap, place or span any items you need, and copy the generated CSS straight into your stylesheet.

Everything runs in your browser, so nothing you build is ever uploaded.

Flexbox Playground - for one-dimensional rows and columns inside grid cells.
CSS clamp() Calculator - for fluid gaps and sizes that scale with the viewport.
Aspect Ratio Calculator - for keeping grid cards and media at consistent proportions.

Define your columns, add a gap, and let auto-fit handle the rest.