Layout: Flexbox, Grid, and Positioning
Build robust interfaces with display utilities, alignment, grid tracks, positioning, stacking contexts, and overflow control.
Display, Flexbox, and alignment
Tailwind maps directly to CSS display and flexbox concepts. flex enables flex layout, items-center controls cross-axis alignment, justify-between distributes items along the main axis, and flex-col changes the direction. flex-1, shrink-0, and grow control how items consume or surrender space.
Remember that justify-* works along the main axis and items-* along the cross axis. When flex-col changes the main axis to vertical, the visual direction of these utilities changes accordingly.
Use flexbox for one-dimensional relationships—navigation bars, button groups, icon-and-text rows, and toolbars.
<div class="flex flex-col gap-3 rounded-xl border bg-white p-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<h2 class="font-semibold">Tasks</h2>
<p class="text-sm text-slate-600">12 tasks in this workspace</p>
</div>
<div class="flex flex-wrap gap-2">
<button class="rounded-lg border px-3 py-2 text-sm">Filter</button>
<button class="rounded-lg bg-blue-600 px-3 py-2 text-sm font-semibold text-white">New task</button>
</div>
</div>sm and above it becomes a row and vertically centers the content. The action group can wrap so buttons do not force the page wider than the viewport.In a `flex-row` container, what does `items-center` align?
CSS Grid and responsive columns
Use grid for two-dimensional layouts such as dashboards, galleries, and card collections. grid-cols-1 establishes one column; sm:grid-cols-2 adds two columns at the small breakpoint. For content-driven layouts, arbitrary grid templates or CSS-first custom rules may be appropriate.
A robust dashboard often uses a grid for the main content and flexbox inside each card. Do not force every layout into one system: grid and flexbox complement each other.
<section class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
<article class="rounded-xl border bg-white p-5"><p class="text-sm text-slate-600">Open tasks</p><p class="mt-2 text-3xl font-bold">18</p></article>
<article class="rounded-xl border bg-white p-5"><p class="text-sm text-slate-600">Completed</p><p class="mt-2 text-3xl font-bold">42</p></article>
<article class="rounded-xl border bg-white p-5"><p class="text-sm text-slate-600">Overdue</p><p class="mt-2 text-3xl font-bold">3</p></article>
<article class="rounded-xl border bg-white p-5"><p class="text-sm text-slate-600">Team members</p><p class="mt-2 text-3xl font-bold">7</p></article>
</section>sm, and four from xl. The browser lays out each card consistently while gap-4 controls both row and column spacing.- Use flexbox for one-dimensional alignment and grid for two-dimensional layout.
- Start with a mobile layout and add columns at wider breakpoints.
- Use
gap-*to maintain consistent spacing between grid tracks.
Positioning, z-index, and overflow
Positioning utilities map to CSS positioning: relative, absolute, fixed, and sticky. A common pattern is a relative card with an absolute badge. An absolutely positioned element is placed relative to its nearest positioned ancestor, so the ancestor often needs relative.
z-* controls stacking order within the relevant stacking context. It does not guarantee that an element appears above everything on the page: transforms, opacity, isolation, and positioned ancestors can create stacking contexts. Use a small, documented layer scale for menus, dialogs, sticky headers, and tooltips.
Overflow utilities (overflow-hidden, overflow-auto, overflow-x-auto) decide how content outside a box behaves. Hiding overflow can clip focus rings and popovers, so apply it only when intended.
If a large z-* value does not bring an element forward, inspect its ancestor stacking contexts and clipping containers. Raising the number alone may not solve the problem.
<article class="relative rounded-2xl border bg-white p-6">
<span class="absolute right-4 top-4 rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-semibold text-emerald-800">
Active
</span>
<h2 class="pr-20 text-lg font-semibold">Website refresh</h2>
<p class="mt-2 text-sm leading-6 text-slate-600">Update the component library and audit responsive behavior.</p>
</article>relative, so the badge's absolute offsets are anchored to the card rather than the page. pr-20 reserves space for the badge so the title does not collide with it.