# Tailwindcss Layout > 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 this capability is needed. - Skill: `tomevault-io/tailwindcss-layout` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/tailwindcss-layout` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/tailwindcss-layout/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/tailwindcss-layout --- # 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 --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/fusengine) — claim your Tome and manage your conversions.