Grid for page sections

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Grid for page sections—the ideas, syntax, and habits you need before moving on in HTML & CSS.

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

You will apply Grid for page sections in contexts like: Landing pages, dashboards, marketing sites, and portfolio pieces built without a framework.

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

When the previous lesson's MCQs feel easy and you can explain Grid for page sections in your own words.

CSS Grid defines rows and columns at once—ideal for page shells: sidebar + content, photo galleries, dashboards.

Starter template

.layout {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 1.5rem;
}

Use repeat(auto-fit, minmax(12rem, 1fr)) for card galleries that reflow without manual breakpoints.

Q: Grid vs Flexbox?
A: Grid for 2D layouts; Flex for 1D distribution and alignment.
Q: What does `fr` mean?
A: A flexible fraction of free space in the grid track.
Q: How do you span columns?
A: `grid-column: 1 / -1` or `span 2` depending on track setup.

Playground

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

Discussion

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.