Grid

Layout is not a decision made per-component — it is a system-level contract. When a traveller resizes their browser or picks up their phone mid-search, every element on screen should recompose coherently, not break in surprising ways. The Kuoni grid formalises that contract with five breakpoints, two distinct max-width containers, and a set of column rules for the component layouts most commonly used in travel browsing.

---

Breakpoints

Five breakpoints cover the range from small phone to large desktop. The 768 px breakpoint is the primary transition point: below it, the navigation becomes a hamburger menu and single-column layouts take over.

The 768 px breakpoint was observed directly from the live kuoni.co.uk site: the primary navigation collapses into a hamburger at exactly this width.

---

Container widths

Two container max-widths are in play across the system.

Documentation shell — 860 px

The documentation content column is capped at 860 px (max-w-content). This is the layout.contentMaxWidth token. At this width, prose lines stay between 60–80 characters — the typographic sweet spot for sustained reading. Beyond 860 px, the content no longer grows; the right-hand table of contents fills the remaining space.

┌─────────────────────────────────────────────────────┐
│  Sidebar (280px)  │  Content (max 860px)  │  ToC    │
│                   │                       │  (240px) │
└─────────────────────────────────────────────────────┘

Product site — 1280 px

Product pages (trip listings, destination pages, checkout) use a 1280 px max-width (layout.siteMaxWidth). This matches the inferred container from the live kuoni.co.uk layout analysis. Horizontal padding (space.6 on mobile, space.10 on desktop) prevents content from reaching the viewport edge.

---

Column behaviour

1-column (default, < 640 px)

All content stacks. Cards are full width. The sidebar is hidden (hamburger menu). This is the baseline layout every component must support.

2-column (≥ 640 px, sm breakpoint)

Small colour swatches, contrast pairings and compact form layouts move to two columns at sm:grid-cols-2. Card grids stay at 1 column until md.

2-column cards (≥ 768 px, md breakpoint)

Featured destination pairs (DestinationCard) and primary offer cards (TripCard) move to 2-column grids at md. This is the most common mid-width layout on the live site.

{/* 2-col card grid — for DestinationCard feature pairs */}
<div className="grid grid-cols-1 gap-5 md:grid-cols-2">
  <DestinationCard ... />
  <DestinationCard ... />
</div>

3-column cards (≥ 1024 px, lg breakpoint)

Standard trip listing grids expand to 3 columns at lg. The pattern is grid-cols-1 sm:grid-cols-2 lg:grid-cols-3.

{/* Standard result grid — 1 → 2 → 3 col */}
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
  <TripCard ... />
  <TripCard ... />
  <TripCard ... />
</div>

When to use 2-col vs 3-col cards

---

Documentation shell layout

The shell has three fixed regions: sidebar, content, and table of contents.

The content column fills the available space between sidebar and ToC, capped at 860 px. On viewports narrower than the sum of sidebar + min-content, the sidebar collapses (this breakpoint is layout.sidebarWidth + 32 px for the toggle button, effectively md).

---

Gap scale

Always use the spacing tokens for grid gaps, never ad-hoc values.