Layout

CSS Layout Summary

CSS layout is how elements are arranged on a page. Layout controls whether boxes stack, sit side by side, stretch, wrap, or line up in rows and columns.

.section {
	display: flex;
	gap: 20px;
}

Layout Starts With Boxes

A web page is made from boxes. Layout is the work of deciding where those boxes go.

Some boxes stack on top of each other. Some boxes sit next to each other. Some boxes need to stay inside a wrapper so the page does not get too wide.

Stacked Layout

Most block elements stack by default. This is why headings, paragraphs, and divs usually appear one below another.

<div class="section">
	<h2>Title</h2>
	<p>Text content</p>
</div>

This simple stacked layout is used constantly on real websites.

Wrappers

A wrapper is a box that holds other boxes. It is often used to keep content from becoming too wide on large screens.

.wrapper {
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
}

The max-width limits the width. The margin value centers the wrapper. The padding keeps the content from touching the screen edge.

Side By Side Layout

When boxes need to sit next to each other, flex and grid are the most common tools.

.columns {
	display: flex;
	gap: 20px;
}

This can place two or more boxes next to each other with space between them.

Responsive Layout

Responsive layout means the page can change for different screen sizes. A layout that is side by side on a desktop may need to stack on a phone.

.columns {
	display: block;
}

@media (min-width: 700px) {
	.columns {
		display: flex;
		gap: 20px;
	}
}

This is a common mobile-first pattern. The simple mobile layout comes first. The larger screen layout is added below it.

Common Layout Pieces

Most everyday website layouts are built from the same basic pieces: wrappers, sections, rows, columns, cards, headers, footers, and navigation areas.