Layout

CSS Layout Summary

CSS layout controls how boxes are arranged on the page, including whether they stack, sit beside each other, or form rows and columns.

HTML creates the page parts. CSS layout decides how those parts use space. Most layout work starts with normal flow, then uses tools such as display, flexbox, grid, and positioning when the design needs more control.

Normal Flow Comes First

Normal flow is the browser’s default layout. Block elements stack vertically, and inline elements flow inside lines of text.

section {
	margin-bottom: 40px;
}

Many simple pages need only normal flow plus spacing, sizing, and typography.

Display Changes Box Behavior

The display property changes how an element participates in layout. It can make an element block, inline, flex, grid, or hidden.

The Display lesson explains these common values.

Flexbox Arranges Items In One Direction

Flexbox is useful when items need to line up in a row or column and share available space.

.nav {
	display: flex;
	gap: 16px;
}

The Flex lesson explains this layout tool in more detail.

Grid Arranges Items In Rows And Columns

Grid is useful when a layout needs rows and columns, such as a gallery or card layout.

.gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

The Grid lesson explains column-based layouts.