Layout Grid

by owl-listener9a6930cf84a8No license2.8K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 4 weeks ago

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`.

Instructions onlyDesign & Creative
AI-generated overview

Defines responsive layout grid systems for digital product design, covering columns, gutters, margins and breakpoints.

What it does
This skill guides an agent in specifying responsive grid systems for digital product design. It covers grid anatomy (columns, gutters, margins, breakpoints), grid types (column, modular, baseline, compound), responsive behaviours (fluid, fixed, adaptive, column dropping), common layout patterns and best practices. The output is grid specifications and documentation that can be handed to developers.
When to use it
Use it when establishing page structure or defining a layout grid for a digital product. It is intended for the stage where columns, gutters, margins and breakpoint behaviour need to be decided and documented.
Requirements
No tools, packages, runtimes, credentials or network access are required; it is instructions only and ships no scripts.

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

Source and attribution

Source:owl-listener/designer-skillsinui-design/skills/layout-gridat commit9a6930c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from owl-listener/designer-skills

Zeigarnik Effect

owl-listener

Applies the Zeigarnik Effect to design progress indicators, saved drafts, interruption handling and re-engagement prompts.

Design & Creative2.8Kupdated 4 weeks ago

Teslers Law

owl-listener

Applies Tesler's Law to decide whether product or user should absorb irreducible complexity in a design.

Design & Creative2.8Kupdated 4 weeks ago

Von Restorff Effect

owl-listener

Applies the Von Restorff (isolation) effect to make one key element visually distinct in a UI or layout.

Design & Creative2.8Kupdated 4 weeks ago

State Machine

owl-listener

Models UI component behavior as finite state machines with states, events, transitions, guards, and actions.

Design & Creative2.8Kupdated 4 weeks ago

Visual Hierarchy

owl-listener

Guidance for establishing visual hierarchy in interface layouts using size, weight, colour, spacing and position.

Design & Creative2.8Kupdated 4 weeks ago

Serial Position Effect

owl-listener

Applies the Serial Position Effect to order menus, lists, and step sequences so key items land where users recall them best.

Design & Creative2.8Kupdated 4 weeks ago

More in Design & Creative

Theme Factory

anthropics

Featured

Offers 10 preset color-and-font themes, plus custom theme generation, for styling slide decks, documents, reports and HTML pages.

Design & Creative179Kupdated today

Slack Gif Creator

anthropics

Featured

Creates animated GIFs sized and optimized for Slack, with PIL drawing helpers, easing and validation utilities.

Includes scripts
Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guidance for distinctive, intentional visual design when building or reshaping a user interface.

Design & Creative179Kupdated today

Canvas Design

anthropics

Featured

Creates original visual art as PNG or PDF from a written design philosophy, for posters, artworks and other static pieces.

Design & Creative179Kupdated today

Brand Guidelines

anthropics

Featured

Applies Anthropic's official brand colors and typography to artifacts that should carry the Anthropic look-and-feel.

Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guides an agent through distinctive, intentional visual design for new or redesigned user interfaces.

Design & Creative149Kupdated today