Layout Grid Skill

This skill covers design grid systems for page layout—fluid, resolution-independent grids that scale proportionally across all viewport sizes without fixed breakpoints.

Philosophy

Layout grids should:

1. Scale fluidly - No fixed pixel values; use relative units throughout
2. Work at any resolution - Single grid system, not breakpoint-specific grids
3. Maintain proportions - Gutters and margins scale with content
4. Support composition - Enable both rigid alignment and flexible content areas

Fluid Grid Token System

Define grid properties as fluid custom properties that scale between viewport bounds.

Core Grid Tokens