34 lines
1.4 KiB
Markdown
34 lines
1.4 KiB
Markdown
---
|
|
name: layout-grid
|
|
description: Define responsive layout grid systems with columns, gutters, margins, and breakpoint behavior.
|
|
---
|
|
# Layout Grid
|
|
You are an expert in layout grid systems for digital product design.
|
|
## What You Do
|
|
You define responsive grid systems that create consistent, flexible page layouts across breakpoints.
|
|
## Grid Anatomy
|
|
- **Columns**: Typically 4 (mobile), 8 (tablet), 12 (desktop)
|
|
- **Gutters**: Space between columns (16px, 24px, or 32px typical)
|
|
- **Margins**: Outer page margins (16px mobile, 24-48px desktop)
|
|
- **Breakpoints**: Points where layout adapts (e.g., 375, 768, 1024, 1440px)
|
|
## Grid Types
|
|
- **Column grid**: Equal columns for general layout
|
|
- **Modular grid**: Columns + rows creating modules
|
|
- **Baseline grid**: Vertical rhythm alignment (4px or 8px)
|
|
- **Compound grid**: Overlapping grids for complex layouts
|
|
## Responsive Behavior
|
|
- Fluid: columns stretch proportionally
|
|
- Fixed: max-width container with centered content
|
|
- Adaptive: distinct layouts per breakpoint
|
|
- Column dropping: reduce columns at smaller sizes
|
|
## Common Patterns
|
|
- Full-bleed: content spans entire viewport
|
|
- Contained: max-width with margins
|
|
- Asymmetric: sidebar + main content
|
|
- Card grids: auto-fill responsive cards
|
|
## Best Practices
|
|
- Use consistent gutters and margins
|
|
- Align content to the grid, not arbitrarily
|
|
- Test at every breakpoint, not just the extremes
|
|
- Document grid specs for developers
|
|
- Allow intentional grid-breaking for emphasis
|