Column

Fixed Widths (1–12)

Each column declares how many of the 12 grid tracks it spans. Use this when proportions are known ahead of time.

<div class="grid grid-cols-12 gap-3">
  <div class="col-span-3">...</div>
  <div class="col-span-6">...</div>
  <div class="col-span-3">...</div>
</div>

Auto Width

An auto-width column shrinks to fit its content; pair it with a flexible sibling that absorbs the remaining space.

<div class="grid grid-cols-12 gap-3">
  <div class="col-span-2">Icon</div>
  <div class="col-span-10">Flexible content</div>
</div>

Responsive Span

Stacked on mobile, two-up on tablet, three-up on desktop. Resize the window (or shrink this panel) to see it collapse.

<div class="grid grid-cols-12 gap-3">
  <div class="col-span-12 md:col-span-6 lg:col-span-4">1</div>
  <div class="col-span-12 md:col-span-6 lg:col-span-4">2</div>
  <div class="col-span-12 md:col-span-12 lg:col-span-4">3</div>
</div>

Order

Visual order can differ from source order. Here column "C" is last in markup but displays first.

<div class="grid grid-cols-12 gap-3">
  <div class="col-span-4 order-3">A</div>
  <div class="col-span-4 order-2">B</div>
  <div class="col-span-4 order-1">C</div>
</div>

Offset

Start a column further along the grid track to leave empty space before it, without an extra placeholder element.

<div class="grid grid-cols-12 gap-3">
  <div class="col-span-8 col-start-3">Centered content</div>
</div>

Edge Cases

Two cases worth checking before shipping a column-based layout: an empty list, and a column with much longer content than its siblings.