Intrinsic responsive CSS patterns.

Intrinsic-responsive-CSS-patterns.md

CSS‑only intrinsic responsive layout patterns that let UI components wrap or adapt based on available space — not arbitrary hardcoded breakpoints. These rely on container queries, style queries, and native CSS layout mechanics. All examples are practical, drop‑in ready, and viewport‑independent.

---

1) Adaptive Component Layout with Container Queries

Use: let a card flip between column/row based on container width. Why: layout responds to container size, not viewport. (MDN)

<section class="cards">
  <article class="card">
    <h3>Title</h3>
    <p>Content</p>
  </article>
</section>

.cards {
  container: cards / inline-size; /* define query container */
  display: grid;
  gap: 1rem;
}

.card {
  display: grid;
  gap: .5rem;
  grid-auto-flow: row;
}

@container cards (min-width: 30rem) {
  .card {
    grid-auto-flow: column; /* switch to row layout when space allows */
    align-items: center;
  }
}

Result: card switches to horizontal layout when enough inline space in its parent. (css-tricks.com)

---

2) Fluid Grids Without Global Breakpoints

Pattern: intrinsic grid that increases columns as space allows.

<section class="grid">
  <div>1</div><div>2</div><div>3</div><div>4</div>
</section>

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

Result: grid items automatically fill rows, creating more columns when container space grows — no CSS media query needed. This uses intrinsic track sizing. (Wikipedia)

---

3) Typography that Scales with Container

Combine container query units with clamp() for fluid type.

.card {
  container: card / inline-size;
}

.card p {
  font-size: clamp(1rem, 1rem + 2cqi, 1.4rem);
}

Effect: text grows or shrinks based on container inline size units (cqi) instead of viewport units. (Modern CSS Solutions)

---

4) Space‑aware Navigation

Make nav wrap only when needed, intrinsically:

<nav class="nav-container">
  <ul class="nav">
    <li>Home</li><li>About</li><li>Services</li><li>Contact</li>
  </ul>
</nav>

.nav-container {
  container: nav / inline-size;
}

.nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

@container nav (max-width: 30rem) {
  .nav {
    flex-direction: column;
  }
}

Result: nav items wrap or stack based on available inline space within .nav-container. (webreference.com)

---

5) Progressive Enhancement with Feature Queries

Wrap container queries in @supports so older browsers fall back gracefully:

@supports (container-type: inline-size) {
  .widget {
    container-type: inline-size;
  }

  @container (min-width: 500px) {
    .widget {
      padding: 2rem;
    }
  }
}

Result: enhances layout only where supported. (Medium)

---

Key Modern CSS Concepts in Use

• Container Queries (@container) — style based on container size, not viewport. (MDN)
• Container units (cqi, etc.) — allow fluid scaling tied to container. (Modern CSS Solutions)
• Intrinsic grid with auto-fit/minmax() — fluid grid without media queries. (Wikipedia)
• Flexbox with flex-wrap — natural wrap based on space. (classic but intrinsic)

---

When This Beats Traditional Breakpoints

✔ Component adapts where it is used, not based on screen width. ✔ No arbitrary breakpoint values — space dictates layout. ✔ Styles are local to components. ✔ No JavaScript required.

---

Authoritative References

• MDN: Container size & style queries guide. (MDN)
• Smashing Magazine introduction to container queries. (smashingmagazine.com)
• CSS‑Tricks: Container queries fundamentals. (css-tricks.com)