FrontendAtlas
Study
▾
Dashboard
Pricing
Get full access
<html> HTML
<section class="gallery"> <article class="card">1</article> <article class="card">2</article> <article class="card">3</article> <article class="card">4</article> <article class="card">5</article> <article class="card">6</article> </section>
# CSS
/* TODOs: 1) Make .gallery use CSS Grid. 2) Add spacing between cards using gap. 3) Default layout: 2 equal-width columns. 4) At screen widths ≥1024px, change to 4 columns. */ body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 2rem; background: #fafafa; line-height: 1.6; } .gallery { /* Your grid styles here */ } .card { background: #222; color: #fff; border-radius: 8px; padding: 2rem; text-align: center; font-weight: 600; } @media (min-width: 1024px) { /* Adjust the grid for larger screens */ }
Preview
Live preview updates as you type
Building preview…
Show preview