CSS Grid Essentials

Flexbox arranges along one axis; CSS Grid controls two dimensions at once — rows and columns together. It is the cleanest tool for page structure, dashboards, galleries, and card grids.

Your first grid

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

<div class="gallery">
  <img src="/img/1.jpg" alt="">
  <img src="/img/2.jpg" alt="">
  <img src="/img/3.jpg" alt="">
  <img src="/img/4.jpg" alt="">
</div>

Expected output: three equal columns; the fourth image wraps to a new row — rows are created automatically. 1fr means "one share of the available space"; repeat(3, 1fr) is shorthand for writing it three times.

Core container properties

Placing items precisely

Grid lines are numbered from 1 (or −1 from the end). You can place items with grid-column and grid-row:

.layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(90px, auto);
  gap: 1rem;
}

.hero      { grid-column: 1 / -1; }        /* full width */
.sidebar   { grid-column: 1 / 2; grid-row: 2 / 4; }
.main      { grid-column: 2 / -1; }
.feature   { grid-column: span 2; }        /* shorthand: start at next line, span 2 */

Expected output: a hero spanning the top, a sidebar taking one column across two rows, main content filling the rest, and two features side by side — pure CSS, source order untouched (good for accessibility).

The four placement forms

grid-column: 2 / 4;        /* line 2 to line 4 */
grid-column: 2 / span 2;   /* start at 2, span two tracks */
grid-column: span 2;       /* auto placement, span two */
grid-column: 1 / -1;       /* first line to last line */

auto vs fr vs min-content

Row heights that just work

grid-auto-rows: minmax(120px, auto);  /* rows ≥ 120px, grow with content */
grid-template-rows: 80px 1fr 60px;    /* explicit: header, flexible body, footer */

Practical example: dashboard shell

.dashboard {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  gap: 1rem;
  min-height: 100svh;
  padding: 1rem;
}
.dashboard-header { grid-area: header; }
.dashboard-side   { grid-area: sidebar; }
.dashboard-main   { grid-area: main; }

Named areas make the layout readable at a glance — the full technique is covered in Responsive Grid Patterns.

Grid vs Flexbox — choosing fast

• One row of items with alignment → Flexbox.
• Rows and columns, overlapping, or full page structure → Grid.
• Components usually flex; page shells usually grid. They combine happily (grid parent, flex children).

Common mistakes

• Hard-coding rows — let grid-auto-rows handle overflow instead of fixed heights that clip content.
• Ignoring min-width — 1fr can still blow out from long words; add minmax(0, 1fr) for text-heavy columns (this is what prevents horizontal scrolling on phones — a bug class we fixed across this site).
• Placing everything manually — auto-placement plus a few explicit spans is less brittle than numbering every cell.

Practice checklist

1. Build a 3-column gallery with repeat(3, 1fr) and watch items wrap into rows.
2. Create a header + sidebar + main layout using grid-template-areas.
3. Use grid-column: span 2 to make one card double-width.

Next: make grids respond to screen size — Responsive Grid Patterns.