CSS Grid

Grid Fundamentals

CSS Grid is a two-dimensional layout system that handles rows AND columns simultaneously, unlike Flexbox which is one-dimensional.

Defining a Grid Container

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

This creates a three-column layout with fixed 200px sidebars and a fluid center. The 1fr unit distributes remaining space proportionally.

Track Sizing Units

.grid {
  grid-template-columns:
    minmax(200px, 1fr)
    2fr 1fr;
}

• fr: Fractional unit distributing available space proportionally across tracks
• minmax(min, max): Sets a size range — column will be at least 200px but grow up to 1fr
• repeat(n, size): Shorthand for repeating track patterns, e.g., repeat(3, 1fr)
• auto: Sizes to fit content, useful when content dictates column width

Auto-Fill and Auto-Fit

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

auto-fill creates as many 300px columns as fit, leaving empty tracks if space remains. auto-fit behaves identically but collapses empty tracks to zero width. Use auto-fit when you want items to stretch and fill the full container width.

Grid Template Areas

Named grid regions provide a visual, readable way to define page layouts directly in CSS.

Named Area Layout

.page {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 220px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 1rem;
}

.header  { grid-area: header; }
.nav     { grid-area: nav; }
.main    { grid-area: main; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

The string values in grid-template-areas visually map to the grid structure. Each word names a region, and repeated names merge cells into a single area.

Responsive Breakpoints with Template Areas

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

HTML Structure

<div class="page">
  <header class="header">...</header>
  <nav class="nav">...</nav>
  <main class="main">...</main>
  <aside class="aside">...</aside>
  <footer class="footer">...</footer>
</div>

Template areas are the most readable layout technique in CSS. The visual grid representation makes it immediately clear how the page is structured without needing to trace line numbers.

Positioning and Spanning

Grid placement properties let you position items precisely across rows and columns.

Grid Placement with Line Numbers

.item-a {
  grid-column: 1 / 3;
  grid-row: 1;
}

.item-b {
  grid-column: span 2;
  grid-row: 2 / span 2;
}

.item-c {
  grid-area: 1 / 3 / 3 / 5;
}

Line numbers start at 1. grid-column: 1 / 3 places an item from column line 1 to line 3, spanning two columns. The span keyword specifies how many tracks to occupy from the item's start position.

Explicit Line Names

.grid {
  grid-template-columns:
    [full-start] 200px
    [content-start] 1fr
    [content-end] 200px
    [full-end];
}

.content {
  grid-column: content-start / content-end;
}

Named lines make placement self-documenting. Instead of remembering line numbers, you reference meaningful names that describe the layout structure.

Auto-Placement with grid-auto-flow

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  grid-auto-rows: minmax(100px, auto);
}

The dense packing algorithm backtracks to fill earlier gaps in the grid, which is particularly useful for image galleries where items span different column counts. Without dense, a large item leaves a gap that smaller items cannot fill.

Responsive Grid Patterns

CSS Grid enables responsive layouts that adapt gracefully across screen sizes without complex media queries.

Intrinsic Layout with auto-fill

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1.5rem;
}

.card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

This pattern creates a responsive card grid that shows as many 280px columns as fit. On a 1200px container, you get 4 columns; on 768px, you get 2 columns — all without a single media query.

Dashboard Layout Pattern

.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar content";
  min-height: 100vh;
}

.sidebar { grid-area: sidebar; }
.header  { grid-area: header; display: flex; align-items: center; padding: 0 1rem; }
.content {
  grid-area: content;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1rem;
  padding: 1rem;
  align-content: start;
}

@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "content";
  }
  .sidebar { display: none; }
}

The dashboard uses a two-level grid: the outer grid defines the page structure, while the content area uses its own auto-fill grid for widget cards.

Holy Grail Layout

.holy-grail {
  display: grid;
  grid-template: 60px 1fr 40px / 200px 1fr 200px;
  min-height: 100vh;
  gap: 0;
}
.holy-grail > header { grid-area: 1 / 1 / 2 / -1; }
.holy-grail > nav    { grid-area: 2 / 1; }
.holy-grail > main   { grid-area: 2 / 2; }
.holy-grail > aside  { grid-area: 2 / 3; }
.holy-grail > footer { grid-area: 3 / 1 / 4 / -1; }

The -1 line reference means "last line" — this ensures header and footer always span the full width regardless of how many columns exist.