Generate Layout System
generate_layout_systemGenerate the layout foundation other generators omit: breakpoints, max-widths, grids, container queries, fluid rhythm, and CSS variables with Tailwind v4 theme, plus responsive design rules.
Instructions
Generate the layout foundation the other generators leave out: breakpoints (with what changes at each), container max-widths, edge padding, a column grid, an intrinsic auto-fit card grid, container queries, and a fluid section-rhythm scale — as CSS custom properties and a Tailwind v4 @theme block, plus the rules that matter more than the numbers (design narrow-first, cap the measure at 45–75ch, prefer intrinsic layout to media queries). Deterministic real code. Pair with generate_type_scale and generate_design_tokens.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| gutter | No | Gutter between columns in px (default 16–32 by preset) | |
| preset | No | Layout archetype (default 'marketing-site'): 'web-app' for a dense app shell with a sidebar, 'docs' for a three-zone documentation layout, 'mobile-first' for a 4→12 column phone-first grid | |
| columns | No | Grid columns (default 12, or 4 for mobile-first) | |
| max_width | No | Max content width in px (default depends on preset: 960–1440) | |
| container_queries | No | Include a container-query example so components respond to their own width (default true) |