git:20260124.acdc941 to git:20260705.8c2f9bc

12 added, 1 removed. Audit A to A.

---

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)."

+ 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). Use when: building flex or grid layouts, positioning elements (absolute/relative/fixed/sticky), managing z-index/inset, or writing container-query responsive styles."

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`

+ ## Display

+ ```html

+ <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