Flexbox and Grid

This section documents Tailwind CSS v4.x — the CSS-first configuration line, whose v4.0 release shipped in January 2025 — as published at the official Tailwind CSS documentation, which is the reference these pages are written and verified against. No specific patch version is pinned.

This content was generated with the assistance of AI and should be verified against the official documentation before being relied on in production, since Tailwind iterates quickly.

This section’s bibliography lists the reference material consulted while preparing these pages.

Flexbox and CSS Grid share one set of box-alignment utilities in Tailwind and differ only in how tracks are declared. This page covers both. For the underlying CSS model — main vs. cross axis, the grid formatting context, implicit tracks — see Layout: Float, Flexbox & Grid.

Flex container

flex (or inline-flex) starts a flex formatting context. flex-direction is flex-row, flex-row-reverse, flex-col, flex-col-reverse. flex-wrap is flex-wrap, flex-wrap-reverse, flex-nowrap.

<div class="flex flex-col gap-4 md:flex-row md:flex-wrap">
  <div class="...">1</div>
  <div class="...">2</div>
  <div class="...">3</div>
</div>

Flex items

flex bundles flex-grow, flex-shrink, and flex-basis: flex-1 (1 1 0%), flex-auto (1 1 auto), flex-initial (0 1 auto), flex-none (none). flex-basis sets just the basis: basis-0, basis-64, basis-1/2, basis-full, the --container-* scale (basis-3xs …​ basis-7xl), or an arbitrary basis-[30ch].

flex-grow and flex-shrink: in Tailwind v4 the classes are grow, grow-0, shrink, shrink-0 (plus numeric grow-2, shrink-2 and arbitrary values). The v3 flex-grow- / flex-shrink- names were removed in v4 — see the upgrade guide — so use the short forms. order is order-1 …​ order-12, order-first, order-last, order-none, and negative -order-1.

<div class="flex gap-4">
  <aside class="basis-64 shrink-0">fixed-ish sidebar</aside>
  <main class="grow">fills the rest</main>
</div>

<div class="flex">
  <div class="flex-1">equal</div>
  <div class="flex-1">equal</div>
  <div class="flex-none order-first">pinned to the start</div>
</div>

Grid

grid-template-columns — grid-template-rows give grid-cols-1 …​ grid-cols-12, grid-cols-none, grid-cols-subgrid, and arbitrary track lists like grid-cols-[24rem_2fr] or grid-rows-[auto_1fr_auto]. Place items with grid-column (col-span-3, col-span-full, col-start-2, col-end-4, -col-start-1) and grid-row (row-span-2, row-start-1, row-end-3).

grid-auto-flow is grid-flow-row, grid-flow-col, grid-flow-dense, grid-flow-row-dense, grid-flow-col-dense. Size implicit tracks with auto-cols (auto-cols-auto, auto-cols-min, auto-cols-max, auto-cols-fr) and auto-rows.

<div class="grid grid-cols-2 gap-4 md:grid-cols-[24rem_2fr]">
  <div class="col-span-2 md:col-span-1 md:row-span-2">feature</div>
  <div>b</div>
  <div>c</div>
</div>

<!-- a horizontally scrolling row of equal-width cards -->
<div class="grid grid-flow-col auto-cols-[16rem] gap-4 overflow-x-auto">
  <article class="...">card</article>
  <article class="...">card</article>
</div>

Gap

gap works for both layouts: gap-4 (row and column), gap-x-8, gap-y-2, gap-px, or an arbitrary gap-[3px]. Values follow the spacing scale.

<div class="grid grid-cols-3 gap-x-8 gap-y-4">...</div>
<div class="flex flex-wrap gap-2">...</div>

Box alignment (both layouts)

The same utilities align content in flex and grid containers:

Utility family Aligns

justify-*

The tracks along the main / inline axis (justify-start, justify-center, justify-between, justify-around, justify-evenly, justify-stretch, justify-normal).

justify-items-*

Each grid item within its cell on the inline axis (justify-items-start, -center, -end, -stretch).

justify-self-*

One grid item on the inline axis.

content-*

Multi-line / multi-row tracks on the cross / block axis (content-start, content-center, content-between, …​).

items-*

Items on the cross / block axis (items-start, items-center, items-end, items-baseline, items-stretch).

self-*

One item on the cross / block axis (self-auto, self-start, self-center, self-stretch, self-baseline).

place-content-*

Shorthand for align-content
justify-content.

place-items-*

Shorthand for align-items + justify-items.

place-self-*

Shorthand for align-self + justify-self.

 
<!-- perfect centring, either layout -->
<div class="grid min-h-dvh place-items-center">
  <div class="flex items-center justify-between gap-4">
    <span>left</span><span>right</span>
  </div>
</div>

Tailwind’s docs pages for flex-basis, grid-template-columns, and justify-content carry interactive diagrams that show each value live — use those rather than a static drawing when learning the axes.