Layout patterns

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 Layout patterns—the ideas, syntax, and habits you need before moving on in Foundation.

Foundation skills help when you inherit marketing sites built on Zurb’s grid system.

You will apply Layout patterns in contexts like: Large marketing sites, email-adjacent layouts, and legacy responsive redesigns.

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 Layout patterns in your own words.

Real pages combine containers, nested grids, and component bands. Three recurring Foundation patterns:

Sidebar + content

grid-x with cell medium-3 for navigation and cell medium-9 for main copy. Nest another grid-x inside the main cell for card grids.

Fluid or full container, grid-x align-middle, copy in medium-6 and media in medium-6. Stack to small-12 on phones.

grid-x small-up-1 medium-up-2 large-up-3 grid-margin-x with each card in a cell—equal columns without repeating width classes on every card.

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.