Login
owl-listener/designer-skills1 file

Layout Grid

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

Use this skillView repositoryView on skills.sh
Specification
Skill ID
owl-listener/designer-skills/layout-grid
Publisher
owl-listener
Repository
designer-skills
Installs
0
Files
1
Synced
Sep 23, 2026
How to use it

Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.

owl-listener/designer-skills/layout-gridInstalls these files
  • SKILL.md

What this skill tells the agent

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

More from owl-listener

owl-listener/designer-skills

A B Test Design

Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.

owl-listener/designer-skills

Accessibility Audit

Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).

owl-listener/designer-skills

Accessibility Test Plan

Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).

Use this skill in a project

Open any RiverX project, search the Skills panel for owl-listener/designer-skills/layout-grid, and install it in one click.

Use this skill