Foundations

Layout

Container widths, breakpoints, and composition patterns for responsive layouts.

Containers

Maximum widths for constraining content at different scales.

--container-sm
640px Mobile landscape
--container-md
768px Tablet portrait
--container-lg
1024px Tablet landscape
--container-xl
1280px Desktop
--container-2xl
1400px Wide desktop
--container-prose
65ch Readable text width
Prose width: --container-prose uses 65ch (65 characters), the optimal line length for reading comfort. This is typography-aware, scaling with font size.

Breakpoints

Mobile-first breakpoints aligned with Tailwind's defaults.

@media (min-width: 640px)
sm Mobile landscape and up
@media (min-width: 768px)
md Tablet and up
@media (min-width: 1024px)
lg Laptop and up
@media (min-width: 1280px)
xl Desktop and up
@media (min-width: 1536px)
2xl Large desktop and up
Mobile-first: Start with mobile styles, then add complexity at larger breakpoints. This ensures fast initial load on constrained devices.

Grid Patterns

Common layout patterns using CSS Grid and Flexbox with Canon spacing.

Responsive Card Grid

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6

Stack Layout

Item 1
Item 2
Item 3

Flex Row

Left
Center (grows)
Right

Layout Composition

Combine container, grid, and spacing tokens for complete layouts.

layout-patterns.css 
/* Centered container */
.container {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* Prose container for articles */
.article {
  max-width: var(--container-prose);
  margin-inline: auto;
}

/* Responsive grid */
.grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Grid Utilities

grid-utilities.css 
/* CSS Grid with Canon spacing */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

/* Flexbox layout */
.flex-row {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

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

Guidelines

Use max-width, not width

Containers should shrink on smaller screens. Always max-width.

Margin-inline for centering

Use margin-inline: auto to center containers horizontally.

Gap over margin

Use gap in Grid/Flexbox instead of margins between children.

Fluid grids

Prefer auto-fill/auto-fit with minmax() for natural responsiveness.