CSS Grid Explained: Two-Dimensional Layout, Finally Easy

#webdev #programming #beginners #css

Introduction

The Flexbox post covered one direction: a row or a column. Real page layouts need two directions at once — a header across the top, a sidebar and main content side by side, a footer across the bottom. That is CSS Grid's job, and it does it with remarkably little code.

If Flexbox is for arranging items in a line, Grid is for arranging them on a page.

Your first grid

Turn an element into a grid container, then describe its columns. This one line creates three equal columns:

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

The fr unit means "a fraction of the available space", so 1fr 1fr 1fr splits the width into three equal parts, whatever the screen size. Add more items than three, and Grid wraps them onto new rows automatically. A photo gallery, a card layout, a product list — all of them are this pattern.

Placing items exactly where you want them

Grid really shines when you name areas of the page and assign items to them:

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Read the grid-template-areas block like a map: the header spans both columns, the sidebar and main share the middle row, the footer spans both columns again. Change the map, and the whole layout rearranges — no floats, no positioning hacks, no wrapper divs.

Grid vs Flexbox: use both

The rule of thumb from the Flexbox post still holds, now with both tools in hand:

Flexbox for a row or a column: navbars, button groups, centring one thing.
Grid for rows and columns together: page layouts, galleries, dashboards.

Most real pages use both — Grid for the overall page structure, Flexbox for the smaller arrangements inside each area. They are designed to work together, not to compete.

Responsive without the pain

Grid makes responsive design simpler too. This single line creates as many columns as fit, each at least 250px wide:

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

On a wide screen you get several columns; on a phone, one. No media queries needed for the basic case — the grid adapts by itself.

Takeaway

Describe your columns with fr units, name your areas like a map, and let Grid handle the rest. For anything two-dimensional, Grid replaces pages of layout code with a handful of readable lines — and it pairs perfectly with Flexbox for everything else.

Originally published at https://practicaldevblog.blogspot.com/2026/10/css-grid-explained-two-dimensional.html

DEV Community