Grid’s power comes from defining tracks explicitly, then placing items into those tracks by line number, span, or named area. This lesson shows both approaches side by side: a three-column track with a spanning item, and a two-column layout defined entirely with named areas.
What this covers
repeat(3, minmax(0, 1fr)) for equal responsive columnsgrid-column: span 2 to make an item occupy multiple tracksgrid-template-areas and grid-area for named page regions
<main class="stack">
<h1>Grid Deep Dive</h1>
<p class="hint">Use this file to compare equal columns, spanning, and named layout areas.</p>
<p class="callout">Your goal: define grid tracks first, then use spanning and named areas to build the page layout.</p>
<section class="card stack">
<h2>Tracks + Span</h2>
<ul class="explain-list">
<li><strong><code>repeat(3, minmax(0, 1fr))</code></strong> creates three equal responsive columns.</li>
<li><strong><code>grid-column: span 2</code></strong> makes one item occupy two tracks.</li>
</ul>
<!-- Grid tracks are rows/columns defined by grid-template rules -->
<div class="grid-demo three-col">
<div class="cell">1<span class="meta">col 1</span></div>
<div class="cell">2<span class="meta">col 2</span></div>
<div class="cell">3<span class="meta">col 3</span></div>
<div class="cell span-2">4 spans 2 columns<span class="meta">grid-column: span 2;</span></div>
<div class="cell">5<span class="meta">fills remaining track</span></div>
</div>
</section>
<section class="card stack">
<h2>Named Areas</h2>
<ul class="explain-list">
<li><strong><code>grid-template-areas</code></strong> names page regions in a visual map.</li>
<li>Each item connects with <code>grid-area: name;</code>.</li>
</ul>
<!-- Named areas make larger page regions easier to reason about -->
<div class="grid-demo named-areas">
<div class="cell hero">hero<span class="meta">grid-area: hero</span></div>
<div class="cell content">content<span class="meta">grid-area: content</span></div>
<div class="cell side">side<span class="meta">grid-area: side</span></div>
</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 */
.grid-demo {
display: grid;
gap: 0.75rem;
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
padding: 0.75rem;
}
.three-col {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.named-areas {
grid-template-columns: 2fr 1fr;
grid-template-areas:
"hero side"
"content side";
}
.cell {
border-radius: 8px;
padding: 0.75rem;
border: 1px solid #bfdbfe;
background: #dbeafe;
min-height: 70px;
}
.hero {
grid-area: hero;
background: #fee2e2;
border-color: #fecaca;
}
.content {
grid-area: content;
background: #dcfce7;
border-color: #bbf7d0;
}
.side {
grid-area: side;
background: #fef3c7;
border-color: #fde68a;
}
.span-2 {
grid-column: span 2;
background: #ede9fe;
border-color: #ddd6fe;
}