CSS Grid in Practice Useful Layouts Without a Framework

Flexbox or Grid? Use both. Flexbox handles one axis — row or column. CSS Grid handles both at once. That distinction drives every layout decision you’ll make.

The properties that actually matter

You can build nearly every layout you’ll encounter with five properties: grid-template-columns, grid-template-rows, gap, grid-area, and place-items. Here’s a centered card in six lines:

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

place-items: center is shorthand for align-items + justify-items. One line, perfectly centered content, no math required.

The fr unit: stop thinking in percentages

Percentages don’t account for gap spacing. fr (fractional unit) distributes remaining space after fixed values are placed. This is a standard 12-column grid:

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

/* Span 4 of 12 columns */
.col-4 {
  grid-column: span 4;
}

/* Span 8 of 12 columns */
.col-8 {
  grid-column: span 8;
}

Each 1fr gets an equal share of the leftover space after the gap is subtracted. Three columns at repeat(3, 1fr) will never overflow the container — something 33.33% can get wrong when gap is involved.

Auto-fill vs auto-fit: responsive grids with no media queries

Both keywords let the browser decide how many columns fit. The difference shows up when there are fewer items than the grid can hold.

auto-fill keeps empty column tracks. auto-fit collapses them, letting existing items stretch to fill the row. For a card grid, you almost always want auto-fill:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

That’s a fully responsive card grid. No breakpoints. Each card is at least 280px wide, and the browser fits as many as it can per row. When the viewport shrinks below 280px, it drops to a single column. Use auto-fit if you want three cards on a wide screen to each expand and fill the row rather than sitting in fixed-width columns with empty space beside them.

Prototyping this kind of layout manually takes time. A CSS grid generator online lets you visually configure columns, rows, and gaps before you write a line — worth the two minutes it saves debugging column math.

Named areas: layout you can read

Grid areas replace positional number juggling with readable names. The holy grail layout — header, sidebar, main content, and footer — is one of the clearest examples:

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 1rem;
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-main    { grid-area: main; }
.page-footer  { grid-area: footer; }

The grid-template-areas string is a visual map of your layout. A dot (.) marks an empty cell. Rename a section by changing a string — no line numbers to recalculate.

Common layouts under 10 lines

Once you have the basics, most recurring patterns collapse to just a few lines.

Sidebar + content:

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

Stacked sections with consistent vertical rhythm:

.page-sections {
  display: grid;
  gap: 4rem;
}

Auto-wrapping icon grid:

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 1rem;
}

Grid inspector in Chrome DevTools

Open DevTools, select any grid container in the Elements panel, and look for the grid badge next to the element. Click it to toggle the grid overlay — you get a visual of every column, row, and gap drawn directly on the page.

In the Layout panel (next to Computed and Styles), you can control what the overlay shows: line numbers, line names, area names, and extended lines that project beyond the grid boundary. When a layout breaks, enabling line numbers while watching the overlay usually reveals the misaligned track immediately — much faster than reading raw grid-column values in the Styles panel.

A practical habit: build the structure in DevTools first, then commit the values to your stylesheet once the grid looks right.

What Grid still leaves to Flexbox

Grid is the right call for two-dimensional structure: page sections, card arrangements, complex dashboards. Flexbox remains better for one-dimensional flows — navigation links that wrap, button groups, form inputs with inline labels, and anywhere you want items to grow or shrink based on their content rather than a defined track.

In practice, you’ll use Grid for the outer layout and Flexbox for the components inside it. They compose cleanly; pick whichever fits the axis of the problem.

You may also like