CSS Grid Cheat Sheet

Two-dimensional layouts made simple

🚀 The Magic Line

Add this to any container to enable grid:

display: grid;

That's it. Everything inside becomes a grid item.

💡 Key Concept

Grid works in TWO dimensions — rows AND columns at the same time. Use it for page layouts, image galleries, and anything that needs alignment in both directions.

Container Properties

Apply these to the parent element (the grid container)

grid-template-columns
Define how many columns and how wide each one is.
/* Three equal columns */
grid-template-columns: 1fr 1fr 1fr;

/* Fixed + flexible + fixed */
grid-template-columns: 200px 1fr 100px;

/* Repeat shorthand */
grid-template-columns: repeat(4, 1fr);
Three equal columns (1fr 1fr 1fr)
1
2
3
Mixed widths (200px 1fr 100px)
200px
1fr (flexible)
100px
grid-template-rows
Define row heights. Works the same as columns.
grid-template-rows: 50px 100px 50px;
grid-template-rows: auto 1fr auto;
Different row heights (50px 100px 50px)
50px
100px
50px
gap
Space between grid items. Can set row and column gaps separately.
gap: 20px; /* All gaps */
gap: 10px 20px; /* Row gap, column gap */
row-gap: 10px; /* Just rows */
column-gap: 20px; /* Just columns */
gap: 20px
1
2
3
4
5
6
grid-template-areas
Name areas and place items visually. Great for page layouts.
grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";
Named grid areas
header
sidebar
main
footer

Item Properties

Apply these to child elements (grid items)

grid-column / grid-row
Make items span multiple columns or rows.
/* Span 2 columns */
grid-column: span 2;

/* Span 2 rows */
grid-row: span 2;

/* Start at line 1, end at line 3 */
grid-column: 1 / 3;
Items spanning multiple cells
span 2 cols
3
span 2 rows
5
6
7
8
grid-area
Assign item to a named area (used with grid-template-areas).
/* In your container: */
grid-template-areas: "header header" "sidebar main";

/* On the item: */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
justify-self / align-self
Position a single item within its grid cell.
justify-self: start; /* Horizontal: start|end|center|stretch */
align-self: center; /* Vertical: start|end|center|stretch */

/* Shorthand */
place-self: center center;
place-self: center center
•
•
•

Responsive Tricks

auto-fit / auto-fill
Create responsive grids without media queries.
/* Columns auto-adjust, minimum 200px each */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

/* auto-fit: collapses empty tracks */
/* auto-fill: keeps empty tracks */
auto-fit with minmax(80px, 1fr) — resize browser to see
1
2
3
4
5
minmax()
Set minimum and maximum sizes for tracks.
/* Column is at least 150px, at most 1fr */
grid-template-columns: minmax(150px, 1fr) 2fr;

/* Row is at least 100px, grows to fit content */
grid-template-rows: minmax(100px, auto);

Common Patterns

Classic Page Layout
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}
Responsive Card Grid
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
/* Cards auto-wrap, no media queries needed */
Image Gallery
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Make featured image span 2x2 */
.featured {
  grid-column: span 2;
  grid-row: span 2;
}
Center Anything
.center-everything {
  display: grid;
  place-items: center;
  min-height: 100vh;
}
/* That's it. Perfectly centered. */
💡 fr Unit

fr means "fraction of available space." 1fr 2fr means the second column gets twice as much space as the first. It's like flexbox's flex-grow but for grid.

💡 Grid vs Flexbox

Use Grid when: You need rows AND columns aligned. Page layouts, galleries, forms.
Use Flexbox when: You need ONE direction. Navigation bars, button groups, centering.