Cards, Grids and Section Layouts

Most pages are made of sections containing card grids — features, products, blog posts, team members. Once you can compose these, you can build almost any marketing or content page. This lesson combines Grid and Flexbox into real patterns.

The responsive card grid

The workhorse pattern is a Grid with <code>repeat(auto-fit, minmax(MIN, 1fr))</code>. It fits as many cards per row as possible, each at least a minimum width, and wraps automatically — responsive with zero media queries.

<div class="cards"><div class="card">One</div><div class="card">Two</div><div class="card">Three</div><div class="card">Four</div></div>

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:22px;box-shadow:0 6px 18px rgba(0,0,0,.06)}

Grid for the page, Flexbox inside cards

A powerful combination: use Grid to lay out the cards, and Flexbox <em>inside</em> each card to arrange its content vertically and push the button to the bottom. <code>flex-direction: column</code> plus <code>margin-top: auto</code> on the button aligns footers across cards of different heights.

<div class="card"><h3>Title</h3><p>A short description that may be longer in some cards.</p><a class="btn" href="#">Action</a></div>

.card{display:flex;flex-direction:column;height:200px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:18px}
.card h3{margin:0 0 6px}
.card p{margin:0;color:#64748b}
.btn{margin-top:auto;align-self:flex-start;background:#2563eb;color:#fff;padding:8px 14px;border-radius:8px;text-decoration:none}

Section rhythm

Sections need consistent vertical spacing to feel organised. Give sections generous, equal padding (e.g. <code>padding: 64px 0</code>) and constrain content width with a centered container (<code>max-width</code> + <code>margin: 0 auto</code>).

.card { width: 250px; }

.cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }