CSS: box model, Flexbox and Grid

Content, padding, border and margin

Padding and border surround content; margin separates boxes. With content-box, width measures content and padding and borders add to it. With border-box, the declared width includes content, padding and border; margin remains outside.

.card {
  box-sizing: border-box;
  width: 300px;
  padding: 16px;
  border: 1px solid #888;
}

Flexbox for a row or column

display: flex makes direct children flex items. flex-direction determines the main axis. justify-content distributes space along that axis; align-items aligns across it. flex-wrap allows items to move onto another line.

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

Grid for rows and columns

Grid defines a two-dimensional layout. repeat and minmax avoid writing each column individually. This creates as many columns as fit, with a minimum that cannot exceed the container width.

.list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}

Adaptation and real content

Try long titles, one card and many cards. A fixed width can suit a component without making the whole page responsive. Avoid visual rearrangements that make keyboard order confusing.

Inspection exercise

1. Create three cards inside a container with class list.
2. Narrow the window and observe the column count.
3. Inspect a card in browser developer tools and identify its content, padding, border and margin.