<html> HTML
<section class="gallery">
  <article class="card">
    <h2>Analytics dashboard</h2>
    <p>Overview card with key product metrics.</p>
  </article>
  <article class="card">
    <h2>Checkout recovery campaign with a longer title</h2>
    <p>Long copy should wrap without forcing horizontal scroll.</p>
  </article>
  <article class="card">
    <h2>Team activity</h2>
    <p>Recent collaboration updates and notes.</p>
  </article>
  <article class="card">
    <h2>Release checklist</h2>
    <p>Tasks that need review before launch.</p>
  </article>
  <article class="card">
    <h2>Empty state plan</h2>
    <p>Fallback messaging for missing images or data.</p>
  </article>
  <article class="card">
    <h2>Customer feedback</h2>
    <p>Signals from support and interviews.</p>
  </article>
  <article class="card">
    <h2>Extra card</h2>
    <p>This should flow into the next row automatically.</p>
  </article>
</section>
# CSS
/* TODOs:
  1) Make .gallery use display: grid.
  2) Add spacing with gap.
  3) Required default layout: repeat(2, minmax(0, 1fr)).
  4) At min-width: 1024px, switch to repeat(4, minmax(0, 1fr)).
  5) Prevent card content from forcing horizontal overflow.
  Tests expect the exact 2-to-4 column requirement above.
  Save auto-fit/minmax() for the optional production variant.
*/
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
  background: #fafafa;
  color: #111827;
  line-height: 1.6;
}
.gallery {
  /* Your grid styles here */
}
.card {
  background: #222;
  color: #fff;
  border-radius: 8px;
  padding: 1rem;
}
.card h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}
.card p {
  margin: 0;
  opacity: 0.85;
}
@media (min-width: 1024px) {
  /* Switch the required solution to 4 columns here */
}
Live preview updates as you type
Building preview…