CSS Grid Layout: Build Real Layouts Step by Step

Grid is the layout system CSS always needed. Card grids, article layouts with sidebars, dashboards, image galleries — all become a few lines of readable code. This guide walks through the patterns I use most, from simple to advanced.

Grid basics#

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

• grid-template-columns defines column tracks. 1fr is one fraction of the free space.
• gap sets spacing between rows and columns.
• Children are placed automatically, left to right, row by row.

Responsive card grids without media queries#

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

The browser fits as many 260 px+ columns as possible and stretches them to fill the row. On a phone you get one column; on a laptop, three or four. The SEO Library on this site uses exactly this pattern.

Page layout with named areas#

.page {
  display: grid;
  grid-template-columns: minmax(0, 760px) 280px;
  grid-template-areas:
    "header header"
    "main   aside"
    "footer footer";
  gap: 32px;
}
.page header { grid-area: header; }
.page main   { grid-area: main; }
.page aside  { grid-area: aside; }
.page footer { grid-area: footer; }

@media (max-width: 900px) {
  .page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "header" "main" "aside" "footer";
  }
}

Placing items precisely#

.feature { grid-column: span 2; }        /* take two columns */
.hero    { grid-column: 1 / -1; }        /* full width: first to last line */
.tall    { grid-row: span 2; }

The minmax(0, 1fr) trick#

A plain 1fr column won’t shrink below its content’s minimum width — a long URL or wide code block can push your layout off the screen on mobile, causing horizontal scrolling. minmax(0, 1fr) allows the column to shrink properly. It’s one of the most common fixes I apply on responsive sites.

Alignment#

Subgrid#

grid-template-rows: subgrid lets nested elements align to the parent grid — perfect for cards whose titles, text and buttons should line up across a row. It’s supported in all modern browsers.

Accessibility note#

Grid can visually reorder content without changing the HTML order. Keep the source order logical, because keyboard and screen-reader users follow the HTML, not the visual layout.