Grid Placement & Alignment

Grid Placement & Alignment

Place items across grid tracks and align them within their cells.

Line-based placement

Span tracks with col-span and row-span:

<div class="grid grid-cols-3">
  <div class="col-span-2">Spans two columns</div>
  <div>One</div>
</div>

• col-span-<n> - cover n columns.
• col-span-full - cover all columns.
• row-span-<n>, row-span-full - same for rows.

Starting lines

col-start-<n> and col-end-<n> place items by line:

<div class="col-start-2 col-end-4">...</div>

• col-start-auto, col-end-auto reset.
• col-start-1/2 works too (start at line 1 of 2).

Auto-flow

grid-flow-row (default), grid-flow-col, grid-flow-row-dense, grid-flow-col-dense. Dense backfills gaps.

Aligning the whole grid

• justify-content via justify-start, justify-center, justify-end, justify-between, etc.
• content-start, content-center, content-end, content-stretch.

Aligning items inside cells

• justify-items-*: justify-items-start, justify-items-center, justify-items-stretch (default).
• items-*: items-start, items-center, items-end, items-stretch (default).
• Per-item: justify-self- and self-.

TL;DR

• col-span-2 makes an item span 2 columns.
• col-start-2, col-end-4 use grid lines.
• grid-flow-* controls auto placement direction.
• items- / justify-items- align inside cells.