Grid Items

Last reviewed May 28, 2026 Content v20260528

This lesson

This lesson teaches Grid Items—the ideas, syntax, and habits you need before moving on in CSS.

Most modern layouts are built with flexbox and grid; skipping this lesson leaves responsive UI fragile.

You will apply Grid Items in contexts like: Page layouts, dashboards, marketing sections, and component libraries.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

Toward the end of the track—use it to consolidate patterns before the capstone or summary lessons.

Grid item placement uses line numbers, spans, named lines, or template areas.

Over-manual placement can become brittle when content count changes dynamically.

Q: What does grid-column: 1 / span 2 mean?
A: Start at line 1 and occupy two columns.
Q: Why prefer auto-placement in repeated cards?
A: Better scalability with unknown item counts.
Q: Typical hero-card pattern?
A: Feature card spanning two tracks with others auto-flowing around it.

Tip: Use fr units and gap instead of margin hacks between tracks.

Can you explain this lesson in 30 seconds without reading notes?

Self-reflection (saved on this device)

Not saved yet.

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Multiple choice — immediate feedback.

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

No discussion yet. Be the first to ask a question.

Jump