Common layout patterns

Last reviewed Jun 1, 2026 Content v20260601

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Common layout patterns—the ideas, syntax, and habits you need before moving on in Tailwind CSS.

Config-driven utilities are how most greenfield product CSS is written today.

You will apply Common layout patterns in contexts like: React/Vue/Next apps, marketing sites, design systems, and rapid prototypes where consistency and speed matter.

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

Production UIs reuse a handful of layouts. Tailwind makes them composable without new CSS files each time.

Patterns to know

Holy grail shell — min-h-screen flex flex-col with flex-1 main
Sidebar + content — grid lg:grid-cols-[240px_1fr] or flex with fixed sidebar width
Centered auth card — min-h-screen flex items-center justify-center p-4
Responsive stack → row — flex flex-col md:flex-row gap-4

Important interview questions and answers

Q: How do you build a full-height app shell?
A: min-h-screen on the outer wrapper, flex column, flex-1 on main so footer stays at bottom.
Q: When does absolute positioning beat flex?
A: Overlays, badges on avatars, decorative elements—not primary document flow.

Self-check

Sketch class names for a vertically centered login card.
Why combine grid and flex in the same project?

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

Which pattern will you reuse first?
What would break if you removed gap utilities?

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