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.
- skills.sh installs
- 2.6K
- GitHub stars
- 3.3K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add owl-listener/designer-skills --skill layout-grid --agent claude-codeInstalls into .claude/skills of the current project.
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
Sponsors
Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthly
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any language
Agent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/owl-listener/designer-skills
- Category
- Frontend Development
- First seen
- Jun 3, 2026
More from owl-listener/designer-skills
All 68- Heuristic Evaluation2.6K
- Data Visualization2.6K
- Spacing System2.5K
- Responsive Design2.5K
- Wireframe Spec2.5K
- Micro Interaction Spec2.5K
- Loading States2.5K
- Animation Principles2.5K
- Design Critique2.5K
- Design Qa Checklist2.5K
- Design Token Audit2.5K
- State Machine2.4K
- Error Handling Ux2.4K
- Design Token2.4K
- Usability Test Plan2.4K
- Accessibility Audit2.4K
- Case Study2.4K
- Ux Writing2.4K
- Journey Map2.4K
- Component Spec2.4K
- Design Principles2.4K
- Theming System2.4K
- Competitive Analysis2.3K
- Feedback Patterns2.3K
Recommended
More Frontend Development1
nextjs-seolaguagu/claude-code-nextjs-skillsNext.js App Router SEO optimization and auditing. Use when implementing or fixing SEO in a Next.js app — metadata and generateMetadata, viewport/themeColor, Ope2.5Kskills.sh installs
nextjs-seolaguagu/claude-code-nextjs-skillsNext.js App Router SEO optimization and auditing. Use when implementing or fixing SEO in a Next.js app — metadata and generateMetadata, viewport/themeColor, Ope2.5Kskills.sh installs2
vue-development-guidesvuejs-ai/skillsA collection of best practices and tips for developing applications using Vue.js. This skill MUST be apply when developing, refactoring or reviewing Vue.js or N2Kskills.sh installs
vue-development-guidesvuejs-ai/skillsA collection of best practices and tips for developing applications using Vue.js. This skill MUST be apply when developing, refactoring or reviewing Vue.js or N2Kskills.sh installs3
ue-ui-umg-slatequodsoler/unreal-engine-skillsUse this skill when working with UMG, UI, widget, UserWidget, Slate, HUD, BindWidget, Common UI, menu, or UMG binding in Unreal Engine. See references/widget-ty1.5Kskills.sh installs
ue-ui-umg-slatequodsoler/unreal-engine-skillsUse this skill when working with UMG, UI, widget, UserWidget, Slate, HUD, BindWidget, Common UI, menu, or UMG binding in Unreal Engine. See references/widget-ty1.5Kskills.sh installs4
vuevercel-labs/json-renderVue 3 renderer for json-render. Use when building Vue UIs from JSON specs, working with @json-render/vue, defining Vue component registries, or rendering AI-gen1.4Kskills.sh installs
vuevercel-labs/json-renderVue 3 renderer for json-render. Use when building Vue UIs from JSON specs, working with @json-render/vue, defining Vue component registries, or rendering AI-gen1.4Kskills.sh installs5
react-testing-libraryitechmeat/llm-codeReact Testing Library: user-centric component testing with queries, user-event simulation, async utilities, and accessibility-first API. Use when writing React 1.4Kskills.sh installs
react-testing-libraryitechmeat/llm-codeReact Testing Library: user-centric component testing with queries, user-event simulation, async utilities, and accessibility-first API. Use when writing React 1.4Kskills.sh installs6
safe-action-hooksnext-safe-action/skillsUse when executing next-safe-action actions from React client components -- useAction, useOptimisticAction, handling status/callbacks (onSuccess/onError/onSettl1.2Kskills.sh installs
safe-action-hooksnext-safe-action/skillsUse when executing next-safe-action actions from React client components -- useAction, useOptimisticAction, handling status/callbacks (onSuccess/onError/onSettl1.2Kskills.sh installs