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.