Web Build 046

Layout and responsive: Repeatable card grid

Build repeatable card grid inside the persistent Public resource hub: Repeatable card grid starter project.

Layout and responsive

10 minutes Core Lesson 46 of 120

flexgridgapminmax@mediawrap

Lesson 46 of 120 0/120 lessons 0/18 missions Layout and responsive · 10 minutes

0%

Continue View profile

New learnerrank 0XP 0%complete

Current edit

Write the repeatable card grid rule

In styles.css, replace the empty rule with the exact repeatable card grid declaration block.

Target: styles.css · Inside .lesson-layout.
Evidence: .lesson-layout contains the lesson's primary declaration.

styles.css css

Preview allowlisted render

Console text only

Instructions 10 minutes

Load exact snippets or type matching Web code. Run each task, compare the preview, then press Check to save the lesson.

Start with the Current task. Edit its named project file, press Run, compare the reviewed preview, then continue. Press Check only after every task is complete.

Write the repeatable card grid rule

In styles.css, replace the empty rule with the exact repeatable card grid declaration block.

Target styles.css · Inside .lesson-layout. Evidence .lesson-layout contains the lesson's primary declaration. Snippet

.lesson-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Next up

Stabilize spacing and width

Add the exact gap and max-width declarations without removing the first rule.

Target styles.css · At the end of .lesson-layout. Evidence The component has a stable gap and bounded width. Snippet

gap: 1rem;
max-width: 64rem;

Next up

Add focus and mobile behavior

Add the exact focus-visible rule and mobile media query, then Run and Check.

Target styles.css · After the component rule. Evidence Keyboard focus is visible and the layout collapses to one column at 720px. Snippet

.lesson-layout button:focus-visible {
  outline: 3px solid #5eead4;
  outline-offset: 3px;
}
@media (max-width: 720px) { ... }

Next up

Save progress

Keep learning across sessions.

Create a free account to sync completed lessons, XP, streaks, course status, and your next lesson across sessions.

Checking account status...

Progress sync is idle.

0XP New learnerrank 0day streak 0best streak 0daily streak 0lessons 0courses 0missions 0tasks Noverified

Continue

Progress sync stores completion IDs, scores, streaks, badges, and game settings. Terminal contents, editor snippets, lab scratch, email, and real names are never published on leaderboards or share cards.

Lesson support

What to notice while you play.

Objective

Complete a project-shaped repeatable card grid build while preserving each passing edit.

Hint

Start with the Current task. Open styles.css, use Show exact edit when needed, Run, then follow the highlighted next task.

Why it matters

Layout and responsive becomes durable when every syntax choice is tied to a visible project outcome and a specific piece of evidence.

Common mistakes

Editing the wrong file instead of styles.css.
Replacing earlier passing work instead of preserving it for the next step.
Pressing Check before every task has passed Run.
Expecting learner HTML, CSS, or JavaScript to execute; the preview uses reviewed scene states only.

Reference

Snippets in this lesson.

@media

Adapt layout at smaller viewports.