CSS Grid + Flexbox Hybrid Layouts

Combine Grid for the overall page structure and Flexbox for inner component alignment.

.page {
  display:grid;
  grid-template-columns: 1fr 3fr;
  gap:2rem;
}
.sidebar { display:flex; flex-direction:column; gap:1rem; }
.main { display:flex; flex-wrap:wrap; gap:1rem; }

---

Example: Blog layout

<div class="page">
  <aside class="sidebar">…</aside>
  <main class="main">…article cards…</main>
</div>