Form layout

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

Forms are where users convert and where security mistakes (validation, labels) show up first.

You will apply Form layout 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.

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

Stack fields vertically for narrow screens—the default Foundation form rhythm. For wider layouts, place labels and inputs inside the XY grid: grid-x grid-padding-x with cell medium-6 (or other breakpoints) so related fields sit side by side at medium and up.

Inline and grouped fields

City/state/ZIP rows belong in one grid-x row so gutters stay aligned. A single full-width cell holds email or address lines that should not split awkwardly on tablet widths.

Compared to Bootstrap

Bootstrap uses row + col-md-* on the form itself; Foundation uses the same XY grid vocabulary as the rest of the page—one less layout dialect to remember on marketing sites.

Self-check

Which grid classes start a padded horizontal row?
When would you keep first and last name in separate cells vs one cell?
Why align related fields in the same grid-x?

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

Grid form row pattern?
Inline labels trade-off?

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