Design → Grid and Layout

Lesson 2 — Grid and Layout

This lesson covers grids and basic layout principles. Learn how columns, gutters, and margins create consistent alignment and predictable spacing across screens.

Key takeaways

  • Grids provide a consistent structure for aligning content and components.
  • Columns, gutters, and margins define horizontal rhythm; a baseline controls vertical rhythm.
  • Consistent spacing and aligned edges improve scanability and perceived order.
  • Responsive layouts reflow content across breakpoints while keeping the grid logic intact.
  • A small set of container widths and a spacing scale reduce layout complexity.

Core concepts

What a grid is

A grid is a layout structure that aligns content consistently across a page. It divides horizontal space into columns and defines where elements align. Grids make placement predictable and simplify responsive behavior by giving rules for reflow across sizes.

Grid anatomy

  • Columns: Vertical divisions that provide alignment points for content and components.
  • Gutters: Spacing between columns that keeps content readable and separated.
  • Margins: Outer edges (container padding) that keep content from touching the viewport edge.
  • Baseline / vertical rhythm: A soft grid for vertical spacing that helps line up elements across sections.

Why grids matter

Observable outcomes from using grids:

  • Faster scanning: aligned elements reduce visual search time.
  • Consistent alignment: predictable edges create trust and order.
  • Predictable spacing: uniform gutters and margins reduce visual noise.
  • Easier responsive adaptation: rules for column collapse and reflow keep layout stable.

Responsive layout basics

Design layouts so content reflows across breakpoints. Use a consistent spacing scale, avoid placing key content at extremes (very far left or right), and ensure container widths adapt without breaking alignment.

Common layout mistakes

  • Inconsistent spacing values across sections.
  • Mixed alignment where left edges don’t line up.
  • Too many container widths that fragment the design system.
  • Cramped content due to insufficient padding.
  • Over-wide text blocks that reduce readability.

Good vs Bad

The following inline blocks match the course templates. Do not change their structure or inline styles; only the inner text and image placeholders are updated.

❌ BAD DESIGN

Example 1: Hero — misaligned headline

Headline width does not align with feature column grid; visual edges are inconsistent, causing the eye to jump and reducing scanability.

Example 2: Features — inconsistent spacing

Feature cards use different padding and gutters, which breaks visual rhythm and increases scanning time for readers.

✓ GOOD DESIGN

Example 1: Hero — aligned headline

Headline and feature columns align to the same column grid and container width, producing a stable reading path and faster scanning.

Good landing grid example

Example 2: Features — consistent spacing

Feature cards share the same padding and gutters, maintaining vertical rhythm and improving perceived order.

❌ BAD DESIGN

Example 1: Dashboard — uneven columns

Sidebar and content column widths do not follow a shared grid; table columns lack alignment to the main content column, reducing readability.

Example 2: Dashboard — inconsistent gutters

Table rows and adjacent cards use different gutters, creating a stepped layout that requires extra scanning to map relationships.

✓ GOOD DESIGN

Example 1: Dashboard — aligned columns

Sidebar width and main content column follow a shared container grid; table columns align to the same left edge, improving scanability.

Good dashboard grid example

Example 2: Dashboard — consistent gutters

Gutters and section padding use the same spacing scale, producing regular vertical rhythm and predictable grouping.

Mini exercise

Create a 12-column grid for desktop and a 4-column grid for mobile for one page section. Define the container width, margins, gutters, and spacing scale.

  1. Choose a container width (e.g., constrained max-width) and outer margins to center content.
  2. Define column count (12 desktop / 4 mobile) and a gutter size as a spacing token (use the same token across sections).
  3. Set a vertical spacing scale (e.g., small, medium, large) and apply it consistently to section padding and component gaps.

Checklist

  • Consistent container width is used across major sections.
  • Section padding and gutters follow a spacing scale.
  • Edges and columns are aligned to the grid.
  • Text widths are readable and not overly wide.
  • Responsive reflow follows predictable rules at breakpoints.
  • Groups have adequate breathing room to separate regions.