Layout Grid

When you need to spec out a grid system for a design, this walks you through the anatomy: columns (4/8/12 across breakpoints), gutters, margins, and how they should behave responsively. It covers the main grid types you'd actually use (column, modular, baseline, compound) and responsive patterns like fluid stretching versus fixed containers. The best practices section is practical: consistent spacing, align to the grid but allow intentional breaks, and document it so developers don't have to guess. It's not going to build your grid for you, but it gives you a solid framework for making layout decisions that won't fall apart at weird viewport sizes.

Install to Claude Code

npx -y skills add owl-listener/designer-skills --skill layout-grid --agent claude-code