CSS Grid Layout: A Complete Visual Guide

CSS Grid is the most powerful layout system in CSS. It lets you create two-dimensional layouts with rows and columns, making complex designs simple.

Basic Concepts

Creating a Grid Container

css
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

This creates a 3x2 grid with fixed sizes.

Flexible Units with fr

The fr unit distributes available space:

css
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* 25% - 50% - 25% */
  gap: 20px;
}

Using repeat()

css
.container {
  /* Creates 12 equal columns */
  grid-template-columns: repeat(12, 1fr);

  /* Creates 4 columns of 100px each */
  grid-template-columns: repeat(4, 100px);

  /* Pattern: 100px, 1fr, 100px, 1fr, ... */
  grid-template-columns: repeat(3, 100px 1fr);
}

Placing Items

Line-Based Placement

Grid lines are numbered starting at 1:

css
.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

/* Shorthand */
.item {
  grid-column: 1 / 3;  /* Start at line 1, end at line 3 */
  grid-row: 1 / 2;
}

/* Even shorter */
.item {
  grid-area: 1 / 1 / 2 / 3;  /* row-start / col-start / row-end / col-end */
}

Spanning Multiple Cells

css
.header {
  grid-column: 1 / -1;  /* Span all columns (-1 = last line) */
}

.sidebar {
  grid-row: span 3;  /* Span 3 rows */
}

.feature {
  grid-column: span 2;
  grid-row: span 2;
}

Named Grid Areas

Create layouts using named areas:

css
.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  min-height: 100vh;
  gap: 20px;
}

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

Empty Cells

Use . for empty cells:

css
grid-template-areas:
  "header header header"
  "sidebar content ."
  "footer footer footer";

Alignment

Container Alignment

css
.container {
  display: grid;

  /* Align items horizontally within cells */
  justify-items: start | end | center | stretch;

  /* Align items vertically within cells */
  align-items: start | end | center | stretch;

  /* Shorthand for both */
  place-items: center center;

  /* Align the entire grid within container */
  justify-content: start | end | center | space-between | space-around | space-evenly;
  align-content: start | end | center | space-between | space-around | space-evenly;
  place-content: center center;
}

Item Alignment

css
.item {
  /* Override container alignment for this item */
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
  place-self: center center;
}

Responsive Patterns

Auto-Fill and Auto-Fit

css
/* Create as many 200px columns as fit */
.container {
  grid-template-columns: repeat(auto-fill, 200px);
}

/* Create as many 200px+ columns as fit, expanding to fill space */
.container {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* auto-fit: Collapses empty tracks */
.container {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Responsive Card Grid

css
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

Media Query Approach

css
.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 600px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

Common Layout Patterns

Holy Grail Layout

css
.page {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr minmax(150px, 200px);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  min-height: 100vh;
}

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

Dashboard Layout

css
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  height: 100vh;
}

.header {
  grid-column: 1 / -1;
}

.sidebar {
  grid-row: 2;
}

.main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
  overflow-y: auto;
}

Magazine Layout

css
.magazine {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.featured {
  grid-column: span 4;
  grid-row: span 2;
}

.article {
  grid-column: span 2;
}

.ad {
  grid-column: span 2;
  grid-row: span 2;
}

Implicit vs Explicit Grid

css
.container {
  display: grid;
  /* Explicit grid */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;

  /* Implicit grid (for overflow items) */
  grid-auto-rows: 150px;
  grid-auto-columns: 200px;
  grid-auto-flow: row | column | dense;
}

Dense Packing

css
.container {
  grid-auto-flow: dense;  /* Fill holes in the grid */
}

Subgrid

Inherit parent's grid tracks:

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

.child {
  grid-column: span 3;
  display: grid;
  grid-template-columns: subgrid;  /* Use parent's columns */
}

Debugging Tips

1. Use browser DevTools - Firefox has excellent grid inspection
2. Add background colors to grid items during development
3. Use outline instead of border to not affect sizing
4. The grid property value in DevTools shows the full computed grid

css
/* Debug helper */
.grid-debug > * {
  outline: 1px solid red;
}

Browser Support

CSS Grid is supported in all modern browsers. For older browsers:

css
/* Feature detection */
@supports (display: grid) {
  .container {
    display: grid;
  }
}

/* Fallback */
@supports not (display: grid) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
}

Conclusion

CSS Grid makes complex layouts simple. Start with basic grid-template-columns, learn the fr unit, and progressively add features like named areas and auto-fit. The key is practice - build layouts and experiment with different properties.