1. A responsive card grid
index.html
HTML
<style>
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; font-family: system-ui, sans-serif; }
.card { border: 1px solid #e6ddd7; border-radius: 8px; padding: 12px; background: #fff; }
.card h3 { margin: 0 0 4px; font-size: 16px; }
</style>
<div class="cards">
<div class="card"><h3>Fiction</h3><p>120 titles</p></div>
<div class="card"><h3>Poetry</h3><p>45 titles</p></div>
<div class="card"><h3>Travel</h3><p>63 titles</p></div>
<div class="card"><h3>Cooking</h3><p>38 titles</p></div>
<div class="card"><h3>History</h3><p>71 titles</p></div>
</div>Unlike a wrapped flexbox row, the last row keeps the same column widths.
2. A gallery with a featured tile
index.html
HTML
<style>
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 60px; gap: 6px; }
.gallery div { background: linear-gradient(135deg, #1a5276, #d94a00); border-radius: 6px; opacity: .85; }
.gallery .big { grid-column: span 2; grid-row: span 2; opacity: 1; }
</style>
<div class="gallery">
<div class="big"></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>One tile spans a 2 by 2 block. The rest flow around it.
3. A page layout with a card in each region
Here the page layout is grid, and each card uses flexbox inside. This is the usual split.
index.html
HTML
<style>
body { margin: 0; font-family: system-ui, sans-serif; }
.page { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 10px; }
@media (min-width: 480px) { .page { grid-template-columns: 2fr 1fr; } }
.item { background: #fdf2e9; padding: 10px; border-radius: 8px; }
.row { display: flex; justify-content: space-between; align-items: center; }
</style>
<div class="page">
<div class="item"><div class="row"><b>Latest post</b><span>5 min</span></div>The main column is wider on larger screens.</div>
<div class="item"><div class="row"><b>Sidebar</b><span>3</span></div>Stacks under the main column on narrow screens.</div>
</div>Exercise: a dashboard grid
Create a grid of 4 columns with a full-width header row, a main area spanning 3 columns and a side panel in the fourth column.
Show a possible solution
style.css
CSS
.dash { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.header { grid-column: 1 / -1; }
.main { grid-column: 1 / 4; }
.side { grid-column: 4; }