Responsive Layout with Flex and Grid

Use CSS Grid for page structure and Flexbox for small alignment tasks like headers and controls.

Edit the panels below and press Run to preview. Nothing you type here is saved — refreshing the page restores the original starter code.

<section class="cards">
  <article class="card">Card one</article>
  <article class="card">Card two</article>
  <article class="card">Card three</article>
</section>

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.card {
  padding: 1rem;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
}

console.log("Responsive grid loaded");