Building Layouts

Every application you build will use variations of three layouts:

1. Sidebar + Content — the admin dashboard pattern
2. Card Grid — for displaying collections of items
3. Table with Header — for data management screens

Understand these three patterns and you can build 80% of any business application.

Before You Build: Understanding the Box Model

Every element on a web page is a box. Before you can lay boxes next to each other, you need to understand the space around them.

Four layers wrap every element:

• Content — the actual text or image inside
• Padding — space between the content and the border (inside the element)
• Border — the line around the element
• Margin — space outside the border (pushes other elements away)

This is called the CSS Box Model. It is the foundation of every layout. When elements don't line up the way you expect, the box model is almost always why.

Try it — drag the sliders and watch the CSS update live. Then edit the table below to see the same changes take effect:

Flex — How Elements Sit Side by Side

Once you understand the box model, you need one more concept before layouts make sense: flex.

The flex property makes a container's children sit side by side instead of stacking vertically. The sidebar + content pattern is just flex with two children.

Experiment with every flex property below — direction, alignment, spacing — and see the code that produces each layout:

Layout 1: Sidebar + Content

The foundation of every admin dashboard and internal tool.

The structure:

• A fixed-width sidebar on the left (typically 256px / w-64)
• A main content area that fills the remaining width
• The sidebar stays fixed while the content scrolls

The key technique — flex for side-by-side layout:

<div className="flex"> makes children sit side by side horizontally. The sidebar is w-64 (fixed 256px). The main area is flex-1 (fills everything else). When the sidebar is 256px, the main area automatically gets viewport width - 256px. No manual calculation needed.

Layout 2: The Stat Card Grid

The most common pattern on any dashboard — a row of metric cards showing key numbers.

What makes this good:

• grid md:grid-cols-5 — 5 columns on desktop, 1 column (stacked) on mobile by default
• gap-3 — consistent spacing between cards on the 4px spacing scale
• hover:scale-[1.02] transition-all — subtle lift on hover, tells the user it is clickable
• Skeleton loading on the value — structure visible before data arrives
• Data-driven — a cards array means adding or removing a card is one line

Layout 3: Page Header + Data Table

The pattern for every management screen — candidates list, jobs list, applications. A page header with title and action button, a search/filter bar, then the table.

What this handles:

• Loading state — skeleton rows, not a spinner
• Empty state — explicit message when there are no results
• Data state — real rows with hover effect
• Three-state pattern: the isLoading ? ... : data?.length === 0 ? ... : data?.map(...) chain

Always handle all three states. An interface that shows nothing while loading feels broken. An interface that shows nothing when there are no results with no explanation leaves users confused.

Common Layout Bugs and Fixes

Bug 1: Content overflows the page horizontally

Symptom: horizontal scrollbar appears, content extends past the right edge.

Cause: an element with a fixed width wider than its container.

Fix: add overflow-hidden on the container, or min-w-0 on the overflowing element (prevents flex children from expanding past their container).

Bug 2: Two elements side by side are not aligning vertically

Symptom: a title and a button in the same row are aligned to the top instead of the center.

Fix: add items-center on the flex container.

Bug 3: Modal appears behind other elements

Symptom: a dialog popup is hidden underneath the sidebar or header.

Cause: z-index conflict.

Fix: shadcn/ui's Dialog component handles this automatically with z-50. If building a custom overlay, use z-50 on the overlay and a higher value on the content.

Bug 4: The sidebar scrolls away with the page

Symptom: as the user scrolls down, the sidebar disappears.

Fix: add fixed or sticky positioning on the sidebar.

The space-y-6 Pattern

The most useful single Tailwind class for page layouts.

space-y-6 adds margin-top: 24px to every direct child except the first. It is the cleanest way to create consistent vertical rhythm between sections without manually adding mt-6 to every element.

One class on the parent. All children automatically spaced. Change space-y-6 to space-y-8 and every gap increases uniformly.

Putting It Together: The Complete Dashboard Page

This page follows every principle from this module:

• Skeleton loading on data
• space-y-6 for vertical rhythm
• grid for responsive columns
• Design system colors (bg-card, text-foreground, text-muted-foreground)
• shadcn/ui components (Card, CardHeader, Button)
• Three-state handling in every data-driven section

In the final lesson of this module, we look at responsive design — how this same layout adapts from a 5-inch phone to a 27-inch monitor.