Grid container and width

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

beginner

This lesson

This lesson teaches Grid container and width—the ideas, syntax, and habits you need before moving on in Foundation.

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

You will apply Grid container and width 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.

When the previous lesson's MCQs feel easy and you can explain Grid container and width in your own words.

A grid-container centers content and applies responsive max-widths at each breakpoint—similar to Bootstrap’s .container. Use grid-container fluid or grid-container full when edge-to-edge width is intentional (heroes, dashboards).

Container variants

grid-container — default responsive max-width
grid-container fluid — full width with gutters
grid-container full — full bleed without side padding (use carefully)

Semantic landmarks from HTML structure still matter: wrap main, header, and footer inside containers rather than sprinkling containers on every widget.

Self-check

When would you choose a fluid container over the default?
What does a grid-container add besides max-width?

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

container vs fluid—when?
Reading width comfort?

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