CSS Grid Layout: The Complete Guide for 2026

CSS Grid is the most powerful layout system ever added to CSS. It lets you control both rows and columns simultaneously, making complex layouts surprisingly simple.

Basic Setup

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* 3 columns */
  grid-template-rows: auto;
  gap: 24px;
}

Defining Columns and Rows

grid-template-columns

/* Fixed widths */
grid-template-columns: 200px 200px 200px;

/* Fractions — divide remaining space */
grid-template-columns: 1fr 2fr 1fr;  /* 25% 50% 25% */

/* Mixed */
grid-template-columns: 250px 1fr;    /* sidebar + main */

/* Repeat */
grid-template-columns: repeat(3, 1fr);         /* 3 equal columns */
grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 equal columns, no overflow */

/* Auto-fill: as many columns as fit */
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

/* Auto-fit: same but collapses empty columns */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

The minmax() Function

/* minmax(min, max): column is at least min, at most max */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
/* Creates as many 250px+ columns as fit, they grow to fill space */

Named Grid Lines

.container {
  grid-template-columns: [sidebar-start] 250px [sidebar-end main-start] 1fr [main-end];
  grid-template-rows: [header-start] 60px [header-end content-start] 1fr [content-end footer-start] 60px [footer-end];
}

.sidebar { grid-column: sidebar-start / sidebar-end; }
.main    { grid-column: main-start / main-end; }

Grid Template Areas — Most Readable Layout

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

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

Placing Items

By Line Numbers

.item {
  grid-column: 1 / 3;    /* spans from column line 1 to 3 (2 columns wide) */
  grid-row: 1 / 2;       /* first row only */
  
  /* Shorthand */
  grid-column: 1 / span 2; /* start at 1, span 2 columns */
  grid-column: span 3;      /* span 3 from current position */
  
  /* -1 = last line */
  grid-column: 1 / -1;     /* full width */
}

Auto Placement

.container {
  grid-auto-flow: row;    /* default: fill rows */
  grid-auto-flow: column; /* fill columns */
  grid-auto-flow: dense;  /* fill holes (backfills) */
}

Alignment

/* Container — aligns the grid tracks */
.container {
  justify-content: start | center | end | space-between | space-around | space-evenly;
  align-content: start | center | end | space-between | space-around | space-evenly;
  place-content: center; /* shorthand: align-content justify-content */
}

/* Container — aligns items within their cells */
.container {
  justify-items: start | center | end | stretch;
  align-items:   start | center | end | stretch;
  place-items: center; /* shorthand */
}

/* Individual item */
.item {
  justify-self: start | center | end | stretch;
  align-self:   start | center | end | stretch;
  place-self: center end; /* align-self justify-self */
}

Real-World Layout Examples

Responsive Card Grid

/* Cards automatically reflow from 1→2→3→4 columns */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

Holy Grail Layout

.app {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

@media (min-width: 768px) {
  .app {
    grid-template-areas:
      "header  header"
      "sidebar main  "
      "footer  footer";
    grid-template-columns: 260px 1fr;
  }
}

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

Dashboard Grid

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  padding: 24px;
}

.stats-row  { grid-column: span 12; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.chart-main { grid-column: span 8; }
.chart-side { grid-column: span 4; }
.table      { grid-column: span 12; }

Masonry-Style Grid (CSS Grid)

/* CSS Grid can approximate masonry */
.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 10px; /* small row unit */
  gap: 16px 16px;
}

/* JS needed to set grid-row-end based on content height */
.masonry-item {
  grid-row-end: span var(--span); /* set via JS */
}

Grid vs Flexbox Decision

Use Grid when:
✓ 2D layout needed (rows AND columns)
✓ Overall page structure
✓ Complex overlapping elements
✓ Precise placement matters
✓ Consistent column alignment across rows

Use Flexbox when:
✓ 1D layout (single row or column)
✓ Component-level layout (nav items, button groups)
✓ Content determines spacing
✓ Dynamic number of items

Debugging CSS Grid

Chrome and Firefox DevTools have excellent Grid visualizers:

• Right-click element → Inspect → look for "grid" badge
• Click badge to show grid overlay with line numbers and area names
• Use "Layout" panel in Chrome to toggle grid overlays

→ Convert CSS units like px, rem, em with the CSS Unit Converter.