CSS Grid: Build Any Layout in Minutes

CSS Grid: Two-Dimensional Layout Power

While Flexbox handles one dimension (row or column), Grid handles both simultaneously. It's the right tool for page layouts, dashboards, image galleries, and anything with rows AND columns.

Basic Grid

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

The fr Unit

fr means "fraction of remaining space":

grid-template-columns: 1fr 1fr 1fr;        /* 3 equal columns */
grid-template-columns: 1fr 2fr 1fr;        /* middle is 2x wider */
grid-template-columns: 250px 1fr;          /* fixed sidebar + fluid main */
grid-template-columns: 1fr 1fr 1fr 1fr;    /* 4 equal columns */

/* Shorthand for repeated values */
grid-template-columns: repeat(4, 1fr);     /* same as above */
grid-template-columns: repeat(3, 200px);   /* 3 columns of 200px */

Template Areas (Named Regions)

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

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

Template areas make layout intent immediately readable. Change the layout by changing the ASCII art.

Auto-Fit and Minmax (Responsive Without Media Queries)

/* Cards that auto-wrap: min 300px, grow to fill */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
/* 1 card per row on mobile, 2 on tablet, 3+ on desktop — no breakpoints! */

/* auto-fit vs auto-fill */
/* auto-fit: stretches items to fill the row */
/* auto-fill: keeps empty tracks (columns) even when items don't fill them */

Placing Items

.item {
  /* Span multiple columns */
  grid-column: 1 / 3;        /* start at col 1, end at col 3 */
  grid-column: span 2;       /* span 2 columns from current position */
  grid-column: 1 / -1;       /* span all columns */

  /* Span multiple rows */
  grid-row: 1 / 3;           /* span rows 1-2 */

  /* Place at specific cell */
  grid-column: 2;
  grid-row: 1;
}

Alignment

.grid {
  /* Align all items within their cells */
  justify-items: center;   /* horizontal alignment in cells */
  align-items: center;     /* vertical alignment in cells */
  place-items: center;     /* shorthand for both */

  /* Align the grid within the container */
  justify-content: center; /* horizontal alignment of entire grid */
  align-content: center;   /* vertical alignment of entire grid */
}

.item {
  /* Override for individual item */
  justify-self: end;
  align-self: start;
}

Common Patterns

/* Dashboard layout */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "nav header"
    "nav main";
  height: 100vh;
}

/* Image gallery with featured image */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.gallery .featured {
  grid-column: span 2;
  grid-row: span 2;
}

/* Holy grail layout */
.holy-grail {
  display: grid;
  grid-template: auto 1fr auto / 200px 1fr 200px;
  min-height: 100vh;
}

Grid vs Flexbox: When to Use Which

In practice, use both: Grid for the page layout, Flexbox for components within each grid cell.

CSS reference: CSS Cheatsheet — Grid, Flexbox, and all CSS properties searchable.