Flexbox and Grid solve different layout problems. Flexbox arranges items along a single axis — useful for navigation rows, button groups, and toolbars. Grid defines both rows and columns at once, making it the right tool for card galleries and full-page regions.
What this covers
display: flex and gap for row-based layouts that can wrapdisplay: grid with repeat() and minmax() for responsive column tracks- When to reach for each system
<main class="stack">
<h1>Layout with Flexbox and Grid</h1>
<p class="hint">Token note: this module reuses shared CSS variables from <code>lesson.css</code> (for example <code>var(--line)</code> for borders). See lesson 09 for full CSS variable setup and workflow.</p>
<p class="callout">Your goal: compare one-dimensional layout (Flexbox) vs two-dimensional layout (Grid).</p>
<!-- Flexbox is ideal for nav bars, button rows, and toolbars -->
<section class="card stack">
<h2>Flexbox</h2>
<ul class="explain-list">
<li><strong><code>display: flex</code></strong> puts children on one axis.</li>
<li><strong><code>gap</code></strong> creates spacing between items without margins.</li>
<li><strong><code>flex-wrap: wrap</code></strong> allows items to move to a new row.</li>
</ul>
<div class="flex-row">
<span class="chip">Nav Item A<span class="meta">.chip + flex child</span></span>
<span class="chip">Nav Item B<span class="meta">flows in row</span></span>
<span class="chip">Nav Item C<span class="meta">wraps if needed</span></span>
<span class="chip">Nav Item D<span class="meta">same style, reusable</span></span>
</div>
</section>
<!-- Grid is ideal for card galleries and page regions -->
<section class="card stack">
<h2>Grid</h2>
<ul class="explain-list">
<li><strong><code>display: grid</code></strong> creates row and column tracks.</li>
<li><strong><code>repeat(2, minmax(0, 1fr))</code></strong> makes two equal columns that can shrink safely.</li>
<li><strong><code>gap</code></strong> controls spacing between all cells.</li>
</ul>
<div class="grid">
<article class="tile">Card 1<span class="meta">column 1</span></article>
<article class="tile">Card 2<span class="meta">column 2</span></article>
<article class="tile">Card 3<span class="meta">next row, column 1</span></article>
</div>
</section>
</main> /* lesson.css base */
/* Shared design tokens used by all CSS demos.
Project setup pattern: define tokens once in :root, then reuse with var(--token). */
:root {
/* Surface/background colors */
--bg: #f8fafc;
--card: #ffffff;
/* Text colors */
--ink: #111827;
--subtle: #4b5563;
/* Border and accent colors */
--line: #d1d5db;
--accent: #0f766e;
}
/* Make element sizing predictable: width includes border/padding */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Base page styles reused by each lesson page */
body {
margin: 0;
font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: var(--ink);
background: var(--bg);
line-height: 1.5;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
/* Content container */
main {
max-width: 960px;
margin: 0 auto;
padding: 2rem 1rem 3rem;
}
/* Generic content card */
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: 10px;
padding: 1rem;
}
/* Vertical rhythm helper: adds top margin to siblings only */
.stack > * + * {
margin-top: 0.75rem;
}
/* Secondary explanatory text */
.hint {
color: var(--subtle);
font-size: 0.95rem;
}
/* Short explanatory callout block for each lesson section */
.callout {
border-left: 3px solid var(--accent);
background: #f0fdfa;
padding: 0.6rem 0.75rem;
border-radius: 6px;
color: #134e4a;
font-size: 0.92rem;
}
/* Bullet list used to explain what each demo element is showing */
.explain-list {
margin: 0;
padding-left: 1.2rem;
}
.explain-list li + li {
margin-top: 0.35rem;
}
/* Inline CSS rule label shown inside demo elements */
.meta {
display: block;
margin-top: 0.3rem;
font-size: 0.72rem;
color: #475569;
}
/* Optional button helper class (not required in every demo) */
.button {
display: inline-block;
border: 0;
border-radius: 8px;
background: var(--accent);
color: #fff;
padding: 0.5rem 0.75rem;
text-decoration: none;
}
/* lesson-specific */
/* Flexbox: one-dimensional layout (row OR column) */
.flex-row {
display: flex;
gap: .75rem;
flex-wrap: wrap;
}
.chip {
padding: 0.5rem 0.75rem;
background: #ccfbf1;
border: 1px solid #99f6e4;
border-radius: 999px;
}
/* Grid: two-dimensional layout (rows AND columns) */
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
.tile {
min-height: 110px;
padding: 0.75rem;
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
}