layout-grid
owl-listener/designer-skills
Define responsive grids with columns, gutters, margins, and breakpoint behavior for consistent page layouts.
What is layout-grid?
An expert system for designing responsive grid layouts that adapt across devices. Use this when establishing the foundational structure of a page or application, defining how columns, gutters, margins, and breakpoints work together.
- Define column counts (4 mobile, 8 tablet, 12 desktop) and gutter/margin spacing
- Specify responsive behavior: fluid, fixed, adaptive, or column-dropping layouts
- Create grid types including column grids, modular grids, baseline grids, and compound grids
- Implement common patterns like full-bleed, contained, asymmetric, and card grid layouts
- Document grid specifications for developer handoff
- Test and validate layouts across multiple breakpoints
How to install layout-grid
npx skills add https://github.com/owl-listener/designer-skills --skill layout-gridHow to use layout-grid
- 1.Define your column structure for each breakpoint (e.g., 4 columns mobile, 12 desktop)
- 2.Specify gutter width (space between columns) and margin width (outer page margins)
- 3.Choose a responsive behavior model: fluid, fixed, adaptive, or column-dropping
- 4.Select grid types appropriate to your layout needs (column, modular, baseline, or compound)
- 5.Document breakpoint values where layout changes occur (e.g., 375px, 768px, 1024px, 1440px)
- 6.Test your grid at every breakpoint, not just common sizes
- 7.Share grid specifications with development team for implementation
Use cases
- Establishing the core layout structure for a new website or application
- Defining how a sidebar and main content area adapt across mobile, tablet, and desktop
- Creating a responsive card grid that reflows based on screen size
- Setting up vertical rhythm alignment using baseline grids for typography consistency
- Documenting grid specs so developers can implement layouts accurately
- Product designers defining page structure
- Design systems teams creating layout foundations
- UX designers planning cross-device experiences
- Design leads documenting grid specifications for development teams
layout-grid FAQ
Use layout-grid for establishing overall page structure and breakpoint behavior. Use spacing-system for defining the spacing scale inside individual components.
Use layout-grid to define the grid structure itself. Use responsive-design for broader cross-device behavior and adaptation strategies.
Common gutter sizes are 16px, 24px, or 32px between columns. Margins typically range from 16px on mobile to 24–48px on desktop, depending on your design.
No. Typical practice is 4 columns on mobile, 8 on tablet, and 12 on desktop, reducing columns at smaller sizes to maintain readability and usability.
Yes. The best practices note that intentional grid-breaking for emphasis is acceptable—just ensure it's deliberate and documented.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: layout-grid
description: Define a responsive grid — columns, gutters, margins, and breakpoint behaviour. Use when establishing page structure. For the spacing scale inside components use spacing-system; for cross-device behaviour use responsive-design.
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
Related skills
More from owl-listener/designer-skills and the wider catalog.
loading-states
Design waiting experiences with spinners, skeletons, optimistic updates, and progressive reveal.
localization-design
Design UI that adapts to any language, script, and cultural context without breaking.
metrics-definition
Define UX metrics and KPIs that connect design decisions to measurable outcomes.
micro-interaction-spec
Specify single micro-interactions with trigger, rules, feedback, and loops for engineering handoff.
millers-law
Chunk information into groups of ~4 to reduce cognitive load and improve interface scannability.
motion-system
Define motion tokens and choreography rules for consistent, accessible animation across your product.