Container width

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 Container width—the ideas, syntax, and habits you need before moving on in Pico CSS.

Class-light frameworks teach when semantic HTML alone should carry the design.

You will apply Container width in contexts like: Documentation sites, blogs, internal tools, and side projects where you want polish without a large class vocabulary.

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.

Pico provides class="container" for a centered, max-width viewport and class="container-fluid" for edge-to-edge layouts. Breakpoints (sm through xxl) map to fixed viewport widths documented in Pico—customize them in Sass when your design system needs different gutters.

Semantic vs class containers

In the default build, put container on main (or nested sections) to constrain prose. In classless mode, main itself is the container—do not mix both patterns on the same page.

Grid alongside containers

class="grid" children split columns inside a container; combine with forms and article cards for docs homepages and dashboards that still feel readable on large monitors.

Self-check

When do you pick container-fluid over container?
Which file variant removes the container class entirely?

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?
Reading measure ok?

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