CSS Grid Layout

Two Dimensions, Not One

display: grid turns an element into a grid container. Unlike flexbox's single axis, grid works across rows and columns simultaneously — you define the structure once on the parent, and every child slots into it.

• ✓grid-template-columns and grid-template-rows define the grid's structure before any content is placed.
• ✓The fr unit distributes available space proportionally between tracks.
• ✓Named grid-template-areas let you describe a layout visually, right inside the CSS.

display: grid & grid-template-columns

grid-template-columns defines how many columns exist and how wide each one is. The fr unit ("fraction") splits remaining space proportionally — 1fr 1fr 1fr creates three equal columns.

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

Proportional, Not Just Equal

fr values don't have to match. grid-template-columns: 2fr 1fr gives the first column twice the space of the second — perfect for a content-plus-sidebar layout without a single percentage calculation.

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

Sketch the Layout Right in the CSS

grid-template-areas lets you name regions and literally draw the layout as a grid of strings — each child is placed with grid-area matching one of those names.

.page {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  gap: 10px;
}

.site-header { grid-area: header; }
.sidebar     { grid-area: sidebar; }
.content     { grid-area: content; }
.site-footer { grid-area: footer; }

grid-column & grid-row

Without named areas, an item can span multiple columns or rows directly with grid-column: span 2 or a specific start/end line.

.featured {
  grid-column: span 2;   /* takes up two column tracks */
}

auto-fit & minmax()

Combining repeat(auto-fit, minmax(...)) creates a grid that adds or removes columns automatically as the container resizes — no breakpoint required.

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

Choosing the Right Tool

Most real interfaces use both — Grid for the overall page skeleton, Flexbox for arranging content inside individual grid cells.

Breaking Down What You Just Learned

Try It Yourself

Build a Grid-Based Page Skeleton

Recap

Key Takeaways