CSS Grid Layout: Beginner to Advanced Guide for Modern Web Design

Flexbox is brilliant for a single row or column, but real pages have both. A header on top, a sidebar next to the content, cards in neat rows. CSS grid is built for exactly that: you define rows and columns, then place items into the cells. It is the most powerful layout tool CSS has, and the basics are quicker to learn than you might expect.

This guide moves from a first three-column layout to named areas and responsive galleries. If boxes and spacing are still new, read the CSS box model guide first.

Your first grid

Like flexbox, grid starts with a container. Add display: grid and describe the columns.

<div class="grid">
  <div>1</div> <div>2</div> <div>3</div>
  <div>4</div> <div>5</div> <div>6</div>
</div>

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

You get three equal columns, and the six children fill two rows automatically. The new unit here is fr, short for "fraction of the free space." Three 1fr columns split the width into thirds after the gaps are removed. Write 2fr 1fr and the first column is twice as wide as the second.

Notice that you did not give the children any width. Grid items stretch to fill their cell by default, so the container decides the sizes, not the items. That is a big mental shift from older float-based layouts.

Rows, columns and tracks

Each row or column is called a track. The lines between tracks are numbered, starting at 1. You can mix units freely:

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;  /* fixed sidebar, flexible content */
  grid-template-rows: auto 1fr auto; /* header, body, footer */
  min-height: 100vh;
}

Typing the same size many times gets tiring, so use repeat(). The line grid-template-columns: repeat(4, 1fr) means four equal columns.

Rows you did not define

If you have more items than defined rows, grid creates extra rows on its own. Control their height with grid-auto-rows, for example grid-auto-rows: 120px, or use minmax(120px, auto) so rows grow when the content needs more room.

Placing items

By default, items fill cells in order. You can place one yourself using line numbers or the word span.

.featured {
  grid-column: 1 / 3;   /* from line 1 to line 3, covers two columns */
}
.tall {
  grid-row: span 2;     /* take up two rows */
}

This is something flexbox cannot do easily: one item spanning several rows and columns while others flow around it.

Related reading: CSS Flexbox Guide: Align Elements Easily for Beginners

Named areas: layouts you can read

My favourite feature for page layouts is grid-template-areas. You draw the layout with text, and it looks like the page it creates.

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 12px;
}
.page header  { grid-area: header; }
.page aside   { grid-area: sidebar; }
.page main    { grid-area: main; }
.page footer  { grid-area: footer; }

To rearrange the page on small screens, change the areas inside a media query and leave the HTML alone. Our guide to CSS media queries shows how to switch layouts at a given width.

Responsive grids with no media query

This is the pattern that makes people fall in love with grid. One line builds a gallery that adds or removes columns as the screen changes.

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

Read it from the inside out. minmax(200px, 1fr) says each column must be at least 200px but may grow to share spare space. auto-fit says to fit as many such columns as the container allows. On a wide desktop you might get five columns, on a phone just one, and you never wrote a breakpoint.

Going further

Once the basics feel natural, a few extra tools are worth knowing.

• grid-auto-flow: dense lets the browser backfill gaps left by large items. It can change the visual order, so use it for galleries, not for text that must be read in sequence.
• subgrid lets a nested grid reuse the tracks of its parent, which keeps things like card titles and buttons lined up across cards. Check current browser support before relying on it.
• Named lines, such as [content-start], give you readable placement instead of bare numbers.

None of these are needed on day one. Add them when a real layout calls for them.

Aligning inside the grid

Alignment properties will look familiar if you have used flexbox:

• justify-items and align-items position content inside each cell.
• justify-content and align-content position the whole grid inside its container when the tracks are smaller than the space available.
• place-items: center is a shorthand that centers content both ways.

Grid or flexbox?

They are not rivals. Use grid when you care about rows and columns together, such as a page frame or a gallery. Use flexbox when you are arranging items along one line, like the contents of a nav bar or a button group. It is common, and perfectly good, to put a flex container inside a grid cell. The advanced CSS techniques article shows more combinations, and you can practise on a real page by building the layout in our portfolio website tutorial.

Common mistakes

• Forgetting display: grid on the parent and then wondering why nothing happens.
• Putting grid properties like grid-template-columns on the children instead of the container.
• Mixing up lines and tracks. A three-column grid has four column lines.
• Using auto-fill when you meant auto-fit. With auto-fit, empty tracks collapse and items stretch; with auto-fill, empty tracks stay.
• Skipping the browser tools. Chrome and Firefox can overlay the grid lines and area names on the page.

Keep exploring in the CSS category for more layout lessons.

Conclusion

Grid rewards you quickly. The essentials:

• Set display: grid on the container and define tracks with grid-template-columns and grid-template-rows.
• The fr unit shares free space, and repeat() saves typing.
• Items can span with grid-column and grid-row.
• grid-template-areas makes page layouts easy to read and rearrange.
• repeat(auto-fit, minmax(200px, 1fr)) builds responsive galleries without breakpoints.