All Skills Search Tools

|

Loading...

AI Agent Skills Directory with categorization, English/Chinese translation, and script security checks.

Sitemap

Home
All Skills
Search
Tools

About

About Us
Disclaimer
Copyright

Help

FAQ
Privacy
Terms

Contact Us:osulivan147@qq.com

© 2026 Skill4Agent. All rights reserved.

Home/All Skills/Product & Design/layout-grid

layout-grid

Original：🇺🇸 English

Translated

Define responsive layout grid systems with columns, gutters, margins, and breakpoint behavior.

3installs

Sourceowl-listener/designer-skills

Added on2026-03-15

NPX Install

npx skill4agent add owl-listener/designer-skills layout-grid

Tags

Translated version includes tags in frontmatter

responsive-grid layout-design product-design grid-systems breakpoints-handling

SKILL.md Content

View Translation Comparison →

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

Download

Download TranslatedIncludes original Skill.md

(2.0 KB)Download Original(900 B)

Related Skills

adapt

Adapt designs to work across different screen sizes, devices, contexts, or platforms. Ensures consistent experience across varied environments.

landing-page-design

Landing page conversion optimization with layout rules, hero section design, and CTA psychology. Covers above-the-fold formula, social proof placement, mobile design, and F-pattern reading. Use for: startup landing pages, product pages, SaaS marketing, conversion optimization. Triggers: landing page, hero section, above the fold, conversion optimization, landing page design, cta button, hero image, landing page layout, saas landing page, product page design, conversion rate, landing page best practices

brand-guidelines

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

ckm:brand

Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.