Grid Cheat Sheet — CSS

CSS Grid Cheatsheet

A complete reference for CSS Grid. Grid is a two-dimensional layout system: you define rows and columns up front, then place items into that structure (or let the browser auto-place them). It is the tool for page-level layout, dashboards, card grids, and anything where rows and columns must stay aligned with each other.

Container Properties (set on the parent)

Property	Example	What it does
`display`	`grid`, `inline-grid`	Turns the element into a grid container
`grid-template-columns`	`200px 1fr 1fr`	Defines the column tracks
`grid-template-rows`	`auto 1fr auto`	Defines the row tracks
`grid-template-areas`	`"header header" "nav main"`	Names regions of the grid for placement
`gap`	`1rem`, or `row-gap column-gap`	Space between tracks (formerly grid-gap)
`grid-auto-rows` / `grid-auto-columns`	`minmax(100px, auto)`	Size of implicit tracks created by auto-placement
`grid-auto-flow`	`row` (default), `column`, `row dense`	Direction auto-placed items flow, `dense` backfills holes
`justify-items` / `align-items`	`start`, `end`, `center`, `stretch`	Aligns items inside their cells (inline / block axis)
`justify-content` / `align-content`	`center`, `space-between`, …	Aligns the whole grid inside the container when tracks are smaller than it

CSS

/* The canonical grid container */
.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + fluid main */
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  min-height: 100dvh;
}

Item Properties (set on the children)

Property	Example	What it does
`grid-column`	`1 / 3`, `span 2`, `1 / -1`	Start / end column lines (`-1` = last line, full width)
`grid-row`	`2 / 4`, `span 3`	Start / end row lines
`grid-area`	`header`, or `row-start / col-start / row-end / col-end`	Place into a named area, or a four-value line shorthand
`justify-self`	`start`, `end`, `center`, `stretch`	Horizontal alignment of this item in its cell
`align-self`	`start`, `end`, `center`, `stretch`	Vertical alignment of this item in its cell
`order`	`-1`, `1`	Affects auto-placement order (rarely needed in grid)

The fr Unit

fr means a fraction of the leftover space after fixed tracks and gaps are subtracted. It is like flex-grow but for tracks.

CSS

grid-template-columns: 1fr 1fr 1fr;   /* three equal columns   */
grid-template-columns: 2fr 1fr;       /* 2:1 ratio             */
grid-template-columns: 200px 1fr;     /* fixed + everything else */

/* fr distributes what is LEFT, not the total width:
   with a 100px gap, "1fr 1fr" splits (width - 100px) in half */

repeat(), minmax(), auto-fit and auto-fill

CSS

/* repeat() — avoid typing tracks by hand */
grid-template-columns: repeat(12, 1fr);        /* 12-col system */
grid-template-columns: repeat(3, 200px 1fr);   /* pattern repeats */

/* minmax() — a track with a floor and a ceiling */
grid-template-columns: minmax(200px, 1fr) 3fr;

/* The RAM pattern: Repeat, Auto, Minmax —
   responsive columns with ZERO media queries */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

Keyword	Behavior with few items
`auto-fill`	Keeps creating empty tracks — items stay at their minimum-ish size, empty columns remain
`auto-fit`	Collapses empty tracks to zero — the real items stretch to fill the row

Tip

Use auto-fit when you want one or two cards to fill the whole row; use auto-fill when items should keep a consistent size no matter how few there are.

Recipe: 12-Column Layout

CSS

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

.hero    { grid-column: 1 / -1; }   /* full width */
.main    { grid-column: 1 / 9; }    /* 8 columns  */
.sidebar { grid-column: 9 / -1; }   /* 4 columns  */

@media (max-width: 768px) {
  .main, .sidebar { grid-column: 1 / -1; } /* stack */
}

Recipe: Holy Grail Layout

CSS

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

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

Recipe: Responsive Card Grid

CSS

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1rem;
}
/* min(250px, 100%) prevents overflow on screens
   narrower than 250px — a worthwhile refinement */

Recipe: Sidebar + Content

CSS

.with-sidebar {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 2rem;
}
/* minmax(0, 1fr) instead of plain 1fr stops wide content
   (code blocks, tables) from blowing the column open —
   1fr actually means minmax(auto, 1fr) */

Warning

The single most common grid bug: 1fr is really minmax(auto, 1fr), so a track can still grow past the fraction to fit unbreakable content. When a grid column overflows, use minmax(0, 1fr) or set min-width: 0 on the item.

Alignment Cheat Table

Property	Aligns what?	Axis
`justify-items`	All items within their cells	Inline (horizontal)
`align-items`	All items within their cells	Block (vertical)
`justify-self`	One item within its cell	Inline
`align-self`	One item within its cell	Block
`justify-content`	The track grid inside the container	Inline
`align-content`	The track grid inside the container	Block
`place-items`	Shorthand: `align-items justify-items`	Both
`place-content`	Shorthand: `align-content justify-content`	Both

CSS

/* The shortest possible perfect centering in CSS */
.center {
  display: grid;
  place-items: center;
}

Explicit vs Implicit Grid

Explicit grid — the tracks you declare with grid-template-columns / grid-template-rows.
Implicit grid — tracks the browser creates when items overflow the explicit grid (or are placed outside it). Sized by grid-auto-rows / grid-auto-columns, auto by default.
Negative line numbers (-1, -2 …) count from the end of the explicit grid only.
grid-auto-flow: dense lets later small items backfill gaps left by large spans — great for galleries, but visual order diverges from DOM order.

Grid vs Flexbox in One Line

Note

Grid: layout first, content fits in. Flexbox: content first, layout flows around it. Use Grid when rows and columns must align across the whole component; use Flexbox for a single row or column of items.

Related pages: Flexbox cheatsheet, grid-template-areas, Advanced grid patterns, and Subgrid.