Layout

Step 2: Layout Structure

Goal: Create a flexible, centered layout system that keeps content readable and well-organized.

Principles

• Content wrapper: Constrain max-width for readability
• Consistent spacing: Use a spacing scale for vertical rhythm
• Logical properties: Use inline/block instead of left/right/top/bottom
• Flexible layouts: Grid and flexbox for modern layouts
• Responsive by default: Mobile-first approach

Implementation

Spacing Scale

A consistent spacing scale creates visual harmony:

/* Spacing scale (based on 0.25rem increments) */
--space-3xs: 0.25rem; /* 4px */
--space-2xs: 0.5rem; /* 8px */
--space-xs: 0.75rem; /* 12px */
--space-sm: 1rem; /* 16px */
--space-md: 1.5rem; /* 24px */
--space-lg: 2rem; /* 32px */
--space-xl: 3rem; /* 48px */
--space-2xl: 4rem; /* 64px */
--space-3xl: 6rem; /* 96px */

/* Fluid spacing for larger gaps */
--space-fluid-sm: clamp(1rem, 2vw, 1.5rem);
--space-fluid-md: clamp(1.5rem, 4vw, 3rem);
--space-fluid-lg: clamp(2rem, 6vw, 4rem);

Layout Containers

/* Content wrapper - keeps text readable */
.container {
  max-inline-size: var(--measure-wide);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* Narrower container for prose */
.container-narrow {
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* Wide container for special content */
.container-wide {
  max-inline-size: 90rem; /* ~1440px */
  margin-inline: auto;
  padding-inline: var(--space-md);
}

Vertical Rhythm

Use the “flow” utility for consistent spacing between elements:

/* Flow utility - automatic spacing between children */
.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

/* Variants */
.flow-sm {
  --flow-space: var(--space-sm);
}
.flow-md {
  --flow-space: var(--space-md);
}
.flow-lg {
  --flow-space: var(--space-lg);
}

Common Layout Patterns

/* Stack - vertical layout */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-md));
}

/* Cluster - horizontal grouping */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-sm));
  align-items: center;
}

/* Grid - auto-fit columns */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-lg));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 20rem)), 1fr));
}

Logical Properties

Replace traditional directional properties:

• margin-left/right → margin-inline-start/end or margin-inline
• margin-top/bottom → margin-block-start/end or margin-block
• padding-left/right → padding-inline
• padding-top/bottom → padding-block
• width → inline-size
• height → block-size

Benefits: Better RTL language support, more semantic

Result

• Content is centered and constrained for readability
• Consistent spacing creates visual rhythm
• Layouts adapt naturally to different screen sizes
• Code is more maintainable with utility classes
• Future-proof with logical properties