alignment-grid-systems

What problem does it solve?

This Skill helps you create and evaluate grid systems so layouts feel ordered, predictable, and visually consistent across components and breakpoints.

Core Features & Use Cases

• Grid foundations: Choose a column grid, modular grid, baseline grid, or hierarchical/asymmetric grid based on the layout needs.
• Proportional spacing: Set gutters, margins, and edge behavior (contained vs. bleed) so rhythm stays coherent.
• Responsive behavior that holds up: Define breakpoint rules so column spans remain meaningful and layouts don’t break at common viewport widths.
• Quality checks + anti-pattern detection: Use heuristics like “show the grid” and the “snap test” to catch inconsistent gutters and free-form drift.

Quick Start

Use the alignment-grid-systems skill to design a responsive 12-column grid for a marketing site and specify gutter, margins, and breakpoint column counts.