<!--
Author: Simon-Pierre Boucher
Contact: contact@spboucher.ai
-->

# Patterns — Responsive Layouts

## Contents
- Auto-responsive card grid (no breakpoints)
- Page shell (header/content/footer)
- Sidebar + content (collapses on narrow)
- Container-query card
- Media object
- Fluid space and size
- Overflow-proofing checklist
- Gotchas

## Auto-responsive card grid (no breakpoints)

```css
.cards {
  display: grid;
  /* min(16rem, 100%) prevents overflow when the container is narrower than 16rem */
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
}
```

## Page shell (header/content/footer, footer pinned)

```css
body {
  min-height: 100dvh;           /* dvh avoids mobile URL-bar jump; fallback: 100vh */
  display: grid;
  grid-template-rows: auto 1fr auto;
}
```

## Sidebar + content (collapses on narrow)

```css
/* Flexbox version — wraps naturally, no media query */
.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.with-sidebar > .sidebar { flex: 1 1 15rem; }      /* basis = collapse point */
.with-sidebar > .content { flex: 999 1 60%; min-width: 0; }
```

```css
/* Grid version — explicit breakpoint */
.shell { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) {
  .shell { grid-template-columns: 15rem minmax(0, 1fr); }
}
```

## Container-query card

```css
.card-slot { container-type: inline-size; }

.card { display: flex; flex-direction: column; gap: 0.75rem; }

@container (min-width: 24rem) {
  .card { flex-direction: row; align-items: center; }
  .card img { max-width: 40%; }
}
```

## Media object (avatar + text)

```css
.media { display: flex; gap: 0.75rem; align-items: flex-start; }
.media > img { flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 50%; }
.media > .body { min-width: 0; }   /* lets long words/URLs shrink instead of overflow */
```

## Fluid space and size

```css
:root {
  /* 1rem at 320px viewport → 2.5rem at 1280px, linear between */
  --space-section: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --content-max: 72rem;
}
.section { padding-block: var(--space-section); }
.container {
  width: min(100% - 2rem, var(--content-max));
  margin-inline: auto;
}
```

## Overflow-proofing checklist

```css
img, video, canvas, svg { max-width: 100%; height: auto; }
.flex-child, .grid-child { min-width: 0; }          /* on anything that must shrink */
.prose { overflow-wrap: break-word; }               /* long URLs, tokens */
table { display: block; overflow-x: auto; }         /* wide data tables scroll alone */
```

Test sequence: 360px → 768px → 1280px → one odd width (e.g. 913px). Look for:
horizontal scrollbar, clipped text, stretched images, wrap orphans.

## Gotchas

- **`minmax(16rem, 1fr)` overflows below 16rem** — always wrap the minimum in `min(16rem, 100%)`.
- **`auto-fit` vs `auto-fill`:** auto-fit collapses empty tracks (items stretch); auto-fill keeps them (items stay small). One word, opposite layouts.
- **Flex `min-width: auto` default** means text children refuse to shrink — the single most common "why is this overflowing" cause.
- **Percentage heights need a sized ancestor**; prefer grid rows (`1fr`) or `min-height` chains.
- **`gap` on flexbox** is fine everywhere modern; if supporting old Safari (<14.1), fall back to margins.
- **Nested containers:** `@container` resolves against the *nearest* ancestor with `container-type` — name containers (`container-name: card-slot`) when nesting.
- **`100dvh` vs `100vh`:** dvh tracks the dynamic mobile toolbar; vh can leave a gap or cause scroll. Provide `100vh` first as fallback on the previous line.