---

name: tailwindcss-layout description: "Layout utilities Tailwind CSS v4.1. Flexbox (flex, justify, items, gap), Grid (grid-cols, grid-rows, place), Position (absolute, relative, fixed, sticky, inset, z-index), Container queries (@container)." user-invocable: false

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

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