The box model, Flexbox and Grid

Once colours and fonts are set, the next question is where things go on the page. CSS treats every element as a rectangular box, and learning how those boxes take space is the key to layout. After that, two modern tools, Flexbox and Grid, let you line boxes up in rows and columns without any tricks. Understanding these will also help you fix the most common web puzzle: why is there a gap here, and why does this box not fit?

Every element is a box

The Box model says that every element is a rectangle made of four layers, from the inside out. The content is the text or image itself. Padding is clear space between the content and its border. The border is a line around the padding. The margin is clear space outside the border that keeps other elements away. Think of a framed photograph on a wall: the photo is the content, the white mount is the padding, the frame is the border, and the gap to the next picture is the margin.

.card {
  padding: 16px;
  border: 2px solid #1b5e20;
  margin: 24px;
  background-color: #eef7ee;
}

A value on its own such as padding: 16px; sets all four sides. You can give two values (top and bottom, then left and right) or four (top, right, bottom, left, clockwise like a clock). Border takes a width, a style and a colour. Margin accepts the same shorthand. The unit px is a pixel, a tiny square of the screen; rem scales with the reader's text size, which is kinder to people who enlarge text.

One surprise catches nearly everyone. By default, a width of 300px sets the width of the content only, and the padding and border are added on top, so the box ends up wider than 300px. Adding box-sizing: border-box; makes the width include padding and border, which is what most people expect. Many stylesheets start with * { box-sizing: border-box; }, where * matches every element.

Flexbox: lining things up in one direction

Flexbox lays items out along one line: a row or a column. You turn it on by giving the container (the parent) display: flex;. Its children, called flex items, now sit side by side. Then you control the line with a few properties. justify-content spreads items along the main direction (left to right in a row). align-items positions them across it (top to bottom in a row). gap adds space between items. flex-wrap: wrap; lets items drop to a new line when there is not enough room.

.cards {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.card {
  padding: 12px;
  background-color: #eef7ee;
  border: 1px solid #1b5e20;
}

Grid: rows and columns together

CSS Grid lays items out in two directions at once, like the squares of a timetable. Give the container display: grid; and describe the columns with grid-template-columns. The unit fr means a fraction of the free space, so 1fr 1fr 1fr makes three equal columns. Items fill the cells from left to right, then start a new row. gap works here too.

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

The two tools combine well. A common pattern is a grid for the overall page and Flexbox inside each card or the navigation bar. You can try both in the live editor from the earlier lessons. Open it from the first CSS lesson, add display: flex; or display: grid; to a container and watch the boxes jump into place.