Summary - Card component

Build a card component using the box model.

Planning the card component

In this summary we put every piece of the box model together and build a card component. With width, padding, margin and box-sizing the card looks both fluid and consistent.

There are two main parts: the card itself (.product-card) and the page container that carries it (.page). We write the card first, then the container.

Exercise Write the card component

Write a block for the .product-card selector with these four declarations: box-sizing: border-box, width: 280px, padding: 16px, margin: 12px.

Show example solution

.product-card {
  box-sizing: border-box;
  width: 280px;
  padding: 16px;
  margin: 12px;
}

Bounding the container

Cards can grow too wide on large screens and become hard to read. So we wrap them in a container (.page) and cap it with max-width. With margin: 0 auto we center it horizontally.

We also add some padding to the container's edges; that way the card never sticks to the screen edge on small screens. Together (max-width, margin auto, padding) they build a fluid, balanced layout.

Exercise Write the page container

Write a block for the .page selector with three declarations: max-width: 960px, margin: 0 auto, padding: 0 16px.

Show example solution

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}

Test yourself

Why does the .page container matter?
- It stops cards from getting too wide on large screens and centers them horizontally
- It makes cards the same width on every screen
- It changes the card's background color
- It aligns the cards vertically
Show answer

It stops cards from getting too wide on large screens and centers them horizontally — Correct. max-width + margin: 0 auto + padding bounds and centers the cards.

Next lesson: Project: Personal blog

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies