Layout Grid
- 1k installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
layout-grid is a designer-skills module that generates consistent responsive grid systems with columns, gutters, margins, and breakpoint rules for mobile, tablet, and desktop layouts.
About
layout-grid is an owl-listener designer-skills expert workflow for defining responsive layout grid systems across digital products. It specifies column counts—typically 4 on mobile, 8 on tablet, and 12 on desktop—plus gutters at 16px, 24px, or 32px and margins from 16px mobile to 24–48px desktop. Breakpoints such as 375, 768, 1024, and 1440px guide when layouts adapt, supporting column, modular, and baseline grid types. Developers and designers reach for layout-grid when starting UI work that must scale cleanly across breakpoints without reinventing spacing math each sprint.
- Defines columns, gutters, margins and breakpoint behavior for any digital product
- Covers column grid, modular grid, baseline grid and compound grid types
- Specifies responsive behaviors including fluid, fixed, adaptive and column-dropping
- Documents common patterns such as full-bleed, contained, asymmetric and card grids
- Includes best-practice checklist for consistent spacing, alignment, testing and developer handoff
Layout Grid by the numbers
- 1,025 all-time installs (skills.sh)
- +49 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #379 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill layout-gridAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1k |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you define a responsive 12-column grid system?
Generate consistent, responsive grid systems that adapt cleanly across mobile, tablet, and desktop breakpoints.
Who is it for?
Frontend developers and designers establishing consistent responsive grid specs before building SaaS, mobile, or extension interfaces.
Skip if: Projects needing full visual branding, typography systems, or component library code without layout structure definitions.
When should I use this skill?
A developer or designer asks to define responsive grids, column counts, gutters, margins, or breakpoint behavior for a product UI.
What you get
Responsive grid specifications with column counts, gutter and margin values, breakpoint map, and grid type guidance for implementation.
- responsive grid specification
- breakpoint and spacing rules
By the numbers
- Recommends 4 mobile, 8 tablet, and 12 desktop columns
- Documents four breakpoints at 375, 768, 1024, and 1440px
- Lists three gutter options at 16px, 24px, and 32px
Files
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
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Use layout-grid for structural responsive grid specs; pick component or branding skills when the need is visual identity rather than column and breakpoint math.
FAQ
What column counts does layout-grid recommend?
layout-grid typically defines 4 columns on mobile, 8 on tablet, and 12 on desktop, giving teams a standard responsive column progression for digital product layouts.
Which breakpoints does layout-grid document?
layout-grid documents breakpoint adaptation points such as 375, 768, 1024, and 1440px where column, gutter, and margin behavior should change across device sizes.
Is Layout Grid safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.