CSS: the box model and layout

HTML gives a page its structure; CSS decides how it looks and where everything goes. Layout used to be the most frustrating part of web development. Modern CSS has made it far more predictable — once you understand the model underneath.

Rules, selectors and the cascade

A CSS rule pairs a selector with declarations:

.card {
  padding: 24px;
  border-radius: 12px;
  background: white;
}

When several rules target the same element, the cascade decides which wins. In short: more specific selectors beat less specific ones (an ID beats a class, which beats an element name); if specificity is equal, the rule that comes later wins. Some properties, such as color and font-family, are also inherited by child elements.

Specificity is counted as three numbers — IDs, classes, element names — compared left to right. Switch rules on and off below; your browser applies them to a real button and reports which colour won:

Everything is a box

The browser draws every element as a rectangle made of four layers, from the inside out:

Content

The text or image itself. width and height apply here by default.

Padding

Space inside the border, around the content. It shows the element’s background.

Border

A line around the padding, with its own width, style and colour.

Margin

Transparent space outside the border that pushes neighbouring boxes away.

Adjust each layer below, and switch box-sizing to see why so many developers get widths wrong the first time.

With the default content-box, adding padding makes an element wider than the width you set. Nearly every modern project starts with this reset so that width means the visible width:

*, *::before, *::after {
  box-sizing: border-box;
}

Flexbox: layout in one direction

Flexbox arranges children in a row or a column and shares space between them. It is the everyday tool for navigation bars, button groups, toolbars and centering things. The CSS in the panel is exactly what the playground applies.

The key idea is two axes. The main axis follows flex-direction; justify-content distributes items along it. The cross axis is perpendicular; align-items positions items across it. Switch the direction to column and notice that the two properties swap visual roles.

Grid: layout in two directions

When you need rows and columns — page layouts, image galleries, dashboards — use CSS Grid:

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

This single rule creates as many 260-pixel-minimum columns as fit the screen and stretches them to fill the row, so the layout adapts from phones to wide monitors automatically. Drag the container width below and watch the browser add and remove columns:

For a classic page, named areas read almost like a sketch:

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

Flexbox or Grid?

A simple rule of thumb: Flexbox for one direction, Grid for two. Flexbox is content-driven — items size themselves and the container distributes leftover space. Grid is layout-driven — you define the tracks and place items into them. Real pages use both: a Grid for the page skeleton and Flexbox inside components.

With structure and layout covered, the next lecture brings the page to life with JavaScript and events.