Module 5 · Responsive Design · Lesson 2 of 2

Responsive CSS Patterns

Intermediate ⏱ 30 min2 sections · 1 exercise · 4-question quiz

Breakpoints are the tool; patterns are the craft. Fluid containers, flexible media, responsive type, and layouts that reflow on their own — the recipes professionals reuse on every build.

1. The foundational three

CSS — on every project you'll ever ship

/* 1. the viewport meta (HTML, not CSS — but mandatory) */
<meta name="viewport" content="width=device-width, initial-scale=1">

/* 2. fluid container */
.container { width: 90%; max-width: 1100px; margin: 0 auto; }

/* 3. flexible media */
img, video { max-width: 100%; height: auto; }

Without the viewport meta tag, phones render a zoomed-out desktop page and every query lies. The fluid container and the media rule prevent the two classic mobile bugs: fixed-width layouts and images blasting out of their columns.

2. Layouts that adapt themselves

CSS — three self-responsive recipes

/* wrapping cards (flexbox) */
.row  { display: flex; flex-wrap: wrap; gap: 16px; }
.row > * { flex: 1 1 240px; }

/* auto-fitting grid */
.grid { display: grid; gap: 16px;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* fluid type */
h1 { font-size: clamp(1.8rem, 4vw, 3.2rem); }

Each recipe adapts continuously — no breakpoints to maintain. Combine them with a handful of media queries for the big structural shifts (sidebar collapsing, nav becoming a drawer) and you have the architecture of this very site.

💡 Test by dragging, not by device list: resize slowly from 320px to full width and fix whatever breaks. Content-out beats device-in.

3. Try it yourself

Apply two patterns: make the image flexible (max-width:100%; height:auto) and turn the row into wrapping cards with flex: 1 1 150px on the children.

exercise.html — editable

4. Quiz — check your understanding

Responsive CSS Patterns Quiz

4 questions · pass at 60%

Q1. Why is the viewport meta tag essential?

It loads CSS fasterWithout it, mobile browsers render a zoomed-out desktop widthIt enables GridIt's only for iOS

It tells the browser to use the device's real width — the precondition for responsive CSS.

Q2. The standard flexible-media rule is…

img { width: 100vw }img { max-width: 100%; height: auto }img { overflow: hidden }img { size: fit }

Images shrink to their container but never upscale past natural size, keeping ratio.

Q3. flex: 1 1 240px on cards in a wrapping row means…

Fixed 240px foreverGrow and shrink from a 240px ideal, wrapping as needed240px marginExactly 240 cards

grow 1, shrink 1, basis 240px — the wrapping-cards recipe.

Q4. Which adapts WITHOUT any media query?

repeat(auto-fit, minmax(220px, 1fr))display: blockposition: fixedz-index: 10

Auto-fitting grid tracks recalculate continuously as the container resizes.

🏆

Quiz passed? You're one step closer to your certificate.

Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.

Track my progress →

Responsive CSS Patterns

1. The foundational three

2. Layouts that adapt themselves

3. Try it yourself

4. Quiz — check your understanding

Responsive CSS Patterns Quiz

Practice with these generators