CSS Grid Cheatsheet

Container Properties

display: grid | inline-grid;

/* Define columns */
grid-template-columns: 1fr 3fr 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-template-columns: 200px 1fr auto;        /* Fixed | Flex | Auto */
grid-template-columns: [name-start] 1fr [name-end] 2fr;

/* Define rows */
grid-template-rows: auto 1fr auto;            /* Header | content | footer */
grid-template-rows: repeat(3, 200px);

/* Named areas */
grid-template-areas:
  "header header header"
  "sidebar content content"
  "footer footer footer";

/* Shorthand: template rows / columns */
grid-template: auto 1fr auto / 1fr 3fr 1fr;

/* Implicit (auto-generated) track sizes */
grid-auto-rows: minmax(100px, auto);
grid-auto-columns: 1fr;
grid-auto-flow: row | column | row dense | column dense;

/* Gaps */
gap: 1.5rem;                    /* row-gap + column-gap */
gap: 1.5rem 2rem;               /* row-gap column-gap */
row-gap: 1.5rem;
column-gap: 2rem;

/* Alignment of all items */
justify-items: start | end | center | stretch;   /* inline axis */
align-items:   start | end | center | stretch;   /* block axis */
place-items:   <align-items> <justify-items>;    /* shorthand */

/* Alignment of all tracks within container */
justify-content: start | end | center | stretch | space-between | space-around | space-evenly;
align-content:   start | end | center | stretch | space-between | space-around | space-evenly;
place-content:   <align-content> <justify-content>;

---

Item Properties (on children)

/* Placement */
grid-column: 1 / 3;            /* Start at line 1, end at line 3 */
grid-column: 1 / -1;           /* Start at 1, end at last line */
grid-column: span 2;           /* Span 2 columns from auto position */
grid-column-start: 2;
grid-column-end: 4;

grid-row: 1 / 3;
grid-row: span 2;

/* Named area */
grid-area: header;             /* Place in named area */
grid-area: 1 / 1 / 2 / -1;   /* row-start / col-start / row-end / col-end */

/* Individual item alignment */
justify-self: start | end | center | stretch;
align-self:   start | end | center | stretch;
place-self:   <align-self> <justify-self>;

---

fr, auto-fill, auto-fit Units

Keyword	Behavior
1fr	1 equal share of remaining space
2fr	2 shares (twice as wide as 1fr)
minmax(min, max)	Track is at least min, at most max
minmax(0, 1fr)	Starts at 0 (avoids overflow with content)
auto	Sized to fit content
repeat(3, 1fr)	Three equal columns
repeat(auto-fill, 280px)	As many 280px columns as fit (may leave empty columns)
repeat(auto-fit, 280px)	Same but empty columns collapse (items grow to fill)
repeat(auto-fill, minmax(280px, 1fr))	Responsive: fill at ≥280px, grow to fill

---

Common Grid Layouts

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

/* ── Classic page layout ── */
.l-page {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100dvh;
}
.l-page__header  { grid-area: header; }
.l-page__sidebar { grid-area: sidebar; }
.l-page__content { grid-area: content; }
.l-page__footer  { grid-area: footer; }

/* ── Holy Grail layout (fluid) ── */
.l-holy-grail {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  min-height: 100dvh;
}

/* ── 12-column grid system ── */
.o-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}
.col-6  { grid-column: span 6; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }
.col-12 { grid-column: span 12; }  /* Full width */

/* ── Subgrid: align card internals ── */
.o-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.c-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;  /* 4 rows: image, title, body, button */
}

/* ── Dense auto-placement (fill gaps) ── */
.o-masonry-approx {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 1rem;
}
.c-featured { grid-column: span 2; grid-row: span 2; }  /* Takes 2×2 space */

/* ── Full-bleed with content max-width ── */
.l-full-bleed {
  display: grid;
  grid-template-columns: 1fr min(65ch, calc(100% - 3rem)) 1fr;
}
.l-full-bleed > * { grid-column: 2; }           /* Normal: centered content */
.l-full-bleed > .full-bleed { grid-column: 1 / -1; }  /* Full width override */

---

Grid Line Counts

3 columns = 4 grid lines
  |1  |2  |3  |4
  ↑         ↑
  1         -1 (negative counts from end)

Shortcut: -1 always means "last line"
  grid-column: 1 / -1;  /* Spans all columns, regardless of count */

---

Alignment Quick Reference

justify-* = inline axis = horizontal (in writing-mode:horizontal-tb)
align-*   = block axis  = vertical

Container alignment (positions item within its cell):
  justify-items / align-items → default behaviour for ALL items

Individual item alignment (override for one item):
  justify-self / align-self

Track content within container (space distribution):
  justify-content / align-content