📖 Step 3: Design - UI Components & Patterns#63 / 291
Gutter
Gutter
📖One-line summary
The space between columns in a grid.
✨Example
Spacing between grid columns (gutter)
Col 1
Col 2
Col 3
← gutter →
← gutter →
⚡Vibe coding prompt examples
>_
Build a layout with 24px gutters in a 12-column grid. Make it responsive so it shrinks to 16px on mobile.
>_
Make card grid gutters responsive. Implement with the CSS gap property and set different values per breakpoint.
>_
Set column gutters in a print layout. Build a 3-column layout with CSS multi-column and set gutters to 2rem.
Try these prompts in your AI coding assistant!