Tailwindcss Layout

Also covers multi-directional spacing (gap, space-x/space-y) and multi-axis alignment utilities.

Tailwind CSS Layout Utilities (v4.1)

Layout utilities for building responsive layouts with Flexbox, Grid, Positioning, and Container Queries.

Core Topics

• Flexbox: flex, flex-direction, justify-content, align-items, gap
• Grid: grid, grid-template-columns, grid-template-rows, place-items, place-content
• Position: absolute, relative, fixed, sticky, inset, z-index
• Display: block, inline, inline-block, flex, grid, hidden
• Container Queries: @container, @md, @lg, responsive container sizing
• Spacing: gap, space-x, space-y, multi-directional spacing
• Alignment: justify-start, items-center, place-content, multi-axis alignment
• Inset: inset, inset-x, inset-y, top, right, bottom, left

Display

<div class="block">Block</div>
<div class="inline">Inline</div>
<div class="inline-block">Inline-block</div>
<div class="flex">Flex</div>
<div class="grid">Grid</div>
<div class="hidden">Hidden</div>

References

• /flexbox.md - Flexbox utilities, flex direction, flex grow/shrink
• /grid.md - Grid layout, columns, rows, gaps, placement
• /position.md - Position utilities, absolute/relative/fixed/sticky, stacking