Layout

A fluid, responsive layout system built on a 25-column wrapper grid, a 12-column inner grid, and a Utopia-generated space scale. Designed to mirror UAL's existing grid conventions while bringing them into a token-driven, container-query-aware architecture.

Overview

The layout system provides consistent page structure across all UAL websites. It handles centring content, capping the maximum width, and arranging content in columns — creating visual consistency without constraining individual component design.

Design

Content sits in a wrapper capped at 1600px, chosen after significant discussion to balance visual impact, legibility, and performance. The previous grid was uncapped, resulting in letterboxed elements and overlong prose lines at wide viewports.

Inside the wrapper, a 12-column fluid grid organises content. Gutters scale proportionally across the full viewport range, maintaining visual rhythm without breakpoint-specific overrides. Repeating content (card grids etc.) can use auto-filling column layouts in presets of two, three, or four columns.

The outer wrapper mirrors UAL's existing 25-column structure to allow new components to sit alongside legacy markup during rollout. This compatibility layer can be removed once the legacy grid is retired.

Development

When .ual-grid is a direct child of .ual-wrapper, it is automatically inset one column from each edge, providing the standard page margin. Add data-auto-cols="two|three|four" to switch to an auto-filling layout for card grids and other repeating content.

Key tokens: --wrapper-max-width (the 1600px cap) and --spacing-grid (fluid column gap, calibrated to 64px at 1600px — recalculate in Utopia if the max-width changes).

Accessibility

• Logical properties (margin-inline, max-inline-size) ensure correct behaviour in right-to-left and vertical writing modes.
• The grid never reorders source, preserving keyboard navigation and screen reader announcement sequence.
• Container queries on .ual-wrapper let components respond to their available width, so the same component works correctly in a sidebar or full-width region without separate breakpoint overrides.