Feature list
Build a feature list grid with flexbox.
Feature list layout
On a landing page, the product's features are shown as a list of cards. In TaskFlow, .feature-card items will sit inside a .features container. When the screen narrows, the cards should wrap to a new line.
For that we give the container display: flex and flex-wrap: wrap. flex-wrap: wrap lets items move to the next line when they don't fit. gap adds space between items with a single value, shorter than writing margins.
Equal width with flex-grow
We want the cards to sit side by side with equal widths on a wide screen. The flex-grow property decides how much of the leftover space an item takes. With flex-grow: 1, each card grows by the same amount and lines up equally wide.
padding gives the card breathing room, keeping content away from the edges. border-radius rounds the corners and gives the card a softer look.
Completing the card look
Now let's picture how the cards will look. The .features container will be flexible, with flex-wrap: wrap sending cards to a new line when they don't fit. gap: 16px adds equal space between cards.
Each .feature-card gets flex-grow: 1 for equal width and border-radius: 8px for rounded corners. In the next step we'll add these two rules to the file.
Exercise Add the .features and .feature-card rules
Take the file with the hero section from the previous lesson. Below it, add two rules:
- A
.featuresclass selector with display: flex, flex-wrap: wrap, and gap: 16px. - A
.feature-cardclass selector with flex-grow: 1 and border-radius: 8px.
End each declaration with a semicolon.
Show example solution
/* TaskFlow landing page */
.hero {
display: flex;
justify-content: center;
align-items: center;
background-color: #1a2b4a;
}
.features {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.feature-card {
flex-grow: 1;
border-radius: 8px;
}Test yourself
-
Complete the feature-card inner padding
.feature-card { flex-grow: 1; padding: ____; border-radius: 8px; }Show answer
.feature-card { flex-grow: 1; padding: 20px; border-radius: 8px; } -
What does the gap property do?
- Adds space between flex items
- Sets an element's outer spacing
- Increases font size
- Sets border thickness
Show answer
Adds space between flex items — Correct. gap adds space between flex items with a single value; it's shorter than margin.
-
Match properties to their meanings
- flex-wrap: wrap
- Items wrap to next line
- flex-grow: 1
- Item fills remaining space
- gap: 16px
- Space between items
- border-radius: 8px
- Rounds the corners