Mobile-first CSS writes the default layout for small screens first, then adds @media (min-width: ...) blocks to enhance at larger widths. This lesson shows one layout shifting from a single column to two columns to a three-column split with a wider primary area.
Note: The playground preview is a fixed-size iframe. The breakpoints in this demo fire at 700px and 1024px — resize your browser window and open the standalone file once it is published to see each layout stage. The playground shows the single-column (mobile) state by default.
What this covers
- Writing the mobile default before any media queries
@media (min-width: 700px) to switch to two columns@media (min-width: 1024px) to add a wider primary column alongside two narrower ones
<main class="stack">
<h1>Responsive Breakpoints</h1>
<p class="hint">Resize the browser to show 1-column, 2-column, then 3-column layout.</p>
<p class="callout">Your goal: build mobile-first CSS first, then progressively enhance at larger widths.</p>
<ul class="explain-list">
<li><strong>Base rule:</strong> one column for small screens.</li>
<li><strong><code>@media (min-width: 700px)</code>:</strong> switch to two columns.</li>
<li><strong><code>@media (min-width: 1024px)</code>:</strong> use three columns with wider primary area.</li>
</ul>
<section class="layout">
<article class="panel">
Primary Content
<span class="meta">desktop: spans 2fr (largest column)</span>
</article>
<aside class="panel">
Secondary Content
<span class="meta">desktop: 1fr</span>
</aside>
<aside class="panel">
Related Links
<span class="meta">desktop: 1fr</span>
</aside>
</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 */
/* Mobile-first default: single column */
.layout {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.panel {
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
padding: 1rem;
min-height: 140px;
}
/* At 700px and up: switch to 2 columns */
@media (min-width: 700px) {
.layout {
grid-template-columns: 1fr 1fr;
}
}
/* At 1024px and up: switch to 3 columns with wider primary area */
@media (min-width: 1024px) {
.layout {
grid-template-columns: 2fr 1fr 1fr;
}
}