3.4 Build Nine Wrapped Flex Sections

How To Use This Tutorial

Work through each step in order. Add the code shown, check the expected output, then move to the next step. The final code is visible at the bottom so you can compare your finished work.

Steps

Create the project files
Add the basic HTML page structure
Link the external CSS file
Add the main area HTML
Add the first row of section HTML
Add the second row of section HTML
Add the third row of section HTML
Style the body
Make main use flex
Allow the cards to wrap
Add padding and background to main
Make each card use flex
Style the shared card boxes
Add the red, amber and green colours
Add the blue, purple and pink colours
Add the teal, orange and grey colours
Remove the heading margins
Remove the paragraph margins

Step 1

Step 1 Create the project files

Where to put this code Create these files inside a new project folder. This step is not typed into the HTML file.

Code

wrapped-flex-sections
|
|-- index.html
`-- style.css

What this does

wrapped-flex-sections is the project folder for this tutorial.
index.html will contain the webpage structure.
style.css will contain the CSS styling rules.

Expected output

No webpage output yet. You have only created the files.

Step 2

Step 2 Add the basic HTML page structure

Where to put this code Add this code into index.html. This creates the starting HTML page.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nine Wrapped Flex Sections</title>
</head>

<body>

</body>
</html>

What this does

DOCTYPE html tells the browser that this is an HTML5 webpage.
head stores information about the webpage.
title sets the text shown on the browser tab.
body is where the visible webpage content will go.

Expected output

The page is blank because no visible content has been added yet.

Step 3

Step 3 Link the external CSS file

Where to put this code Replace the current head section in index.html with this updated head section.

Code

<head>
    <meta charset="UTF-8">
    <title>Nine Wrapped Flex Sections</title>
    <link rel="stylesheet" href="style.css">
</head>

What this does

link connects the HTML file to another file.
rel tells the browser that the linked file is a stylesheet.
href tells the browser the name of the CSS file.
style.css will control how the webpage looks.

Expected output

The page is still blank because there is no visible content yet.

Step 4

Step 4 Add the main area HTML

Where to put this code Add the main tag inside the body tag in index.html.

Code

<main>

</main>

What this does

main creates the main content area of the webpage.
main will hold the nine section cards.

Expected output

The main area is empty, so there is still no visible content yet.

Step 5

Step 5 Add the first row of section HTML

Where to put this code Add these three section tags inside the main tag in index.html.

Code

<section class="section-card red-card">
    <h2>Section 1</h2>
    <p>This section uses a red theme.</p>
</section>

<section class="section-card amber-card">
    <h2>Section 2</h2>
    <p>This section uses an amber theme.</p>
</section>

<section class="section-card green-card">
    <h2>Section 3</h2>
    <p>This section uses a green theme.</p>
</section>

What this does

section creates each content card inside main.
section-card is the shared class that all nine cards will use.
red-card will give Section 1 its red theme later.
amber-card will give Section 2 its amber theme later.
green-card will give Section 3 its green theme later.

Expected output

Section 1

This section uses a red theme.

Section 2

This section uses an amber theme.

Section 3

This section uses a green theme.

Step 6

Step 6 Add the second row of section HTML

Where to put this code Add these three section tags inside the main tag, under the first three sections.

Code

<section class="section-card blue-card">
    <h2>Section 4</h2>
    <p>This section uses a blue theme.</p>
</section>

<section class="section-card purple-card">
    <h2>Section 5</h2>
    <p>This section uses a purple theme.</p>
</section>

<section class="section-card pink-card">
    <h2>Section 6</h2>
    <p>This section uses a pink theme.</p>
</section>

What this does

blue-card will give Section 4 its blue theme later.
purple-card will give Section 5 its purple theme later.
pink-card will give Section 6 its pink theme later.
section-card is reused so these cards share the same layout CSS.

Expected output

Section 1

This section uses a red theme.

Section 2

This section uses an amber theme.

Section 3

This section uses a green theme.

Section 4

This section uses a blue theme.

Section 5

This section uses a purple theme.

Section 6

This section uses a pink theme.

Step 7

Step 7 Add the third row of section HTML

Where to put this code Add these three section tags inside the main tag, under the first six sections.

Code

<section class="section-card teal-card">
    <h2>Section 7</h2>
    <p>This section uses a teal theme.</p>
</section>

<section class="section-card orange-card">
    <h2>Section 8</h2>
    <p>This section uses an orange theme.</p>
</section>

<section class="section-card grey-card">
    <h2>Section 9</h2>
    <p>This section uses a grey theme.</p>
</section>

What this does

teal-card will give Section 7 its teal theme later.
orange-card will give Section 8 its orange theme later.
grey-card will give Section 9 its grey theme later.
section-card is reused so all nine cards share the same layout CSS.

Expected output

Section 1

This section uses a red theme.

Section 2

This section uses an amber theme.

Section 3

This section uses a green theme.

Section 4

This section uses a blue theme.

Section 5

This section uses a purple theme.

Section 6

This section uses a pink theme.

Section 7

This section uses a teal theme.

Section 8

This section uses an orange theme.

Section 9

This section uses a grey theme.

Step 8

Step 8 Style the body

Where to put this code Add this code into style.css.

Code

body {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    color: #222222;
}

What this does

body selects the whole visible webpage.
margin-top removes the browser gap at the top.
margin-right removes the browser gap on the right.
margin-bottom removes the browser gap at the bottom.
margin-left removes the browser gap on the left.
font-family changes the font used on the webpage.
background-color changes the page background to light grey.
color changes the normal text colour to dark grey.

Expected output

Section 1

This section uses a red theme.

Section 2

This section uses an amber theme.

Section 3

This section uses a green theme.

Section 4

This section uses a blue theme.

Section 5

This section uses a purple theme.

Section 6

This section uses a pink theme.

Section 7

This section uses a teal theme.

Section 8

This section uses an orange theme.

Section 9

This section uses a grey theme.

Step 9

Step 9 Make main use flex

Where to put this code Add this code into style.css under the body CSS.

Code

main {
    display: flex;
    justify-content: center;
    gap: 20px;
}

What this does

main selects the main content area.
display turns main into a flex container.
flex allows the section cards to sit next to each other.
justify-content centres the group of cards across the main area.
gap adds space between the section cards.

Expected output

Section 1

This section uses a red theme.

Section 2

This section uses an amber theme.

Section 3

This section uses a green theme.

Section 4

This section uses a blue theme.

Section 5

This section uses a purple theme.

Section 6

This section uses a pink theme.

Section 7

This section uses a teal theme.

Section 8

This section uses an orange theme.

Section 9

This section uses a grey theme.

Step 10

Step 10 Allow the cards to wrap

Where to put this code Add this flex-wrap line inside the existing main CSS rule in style.css.

Code

main {
    flex-wrap: wrap;
}

What this does

flex-wrap allows flex items to move onto a new row when there is not enough space.
wrap moves the extra sections onto the next row.
main is the flex container, so the wrapping happens to the section cards inside main.

Expected output

Section 1

This section uses a red theme.

Section 2

This section uses an amber theme.

Section 3

This section uses a green theme.

Section 4

This section uses a blue theme.

Section 5

This section uses a purple theme.

Section 6

This section uses a pink theme.

Section 7

This section uses a teal theme.

Section 8

This section uses an orange theme.

Section 9

This section uses a grey theme.

Step 11

Step 11 Add padding and background to main

Where to put this code Add these padding and background lines inside the existing main CSS rule in style.css.

Code

main {
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;

    background-color: #cccccc;
}

What this does

padding-top adds space inside the top of main.
padding-right adds space inside the right side of main.
padding-bottom adds space inside the bottom of main.
padding-left adds space inside the left side of main.
background-color changes the main area background to grey.

Expected output

Section 1

This section uses a red theme.

Section 2

This section uses an amber theme.

Section 3

This section uses a green theme.

Section 4

This section uses a blue theme.

Section 5

This section uses a purple theme.

Section 6

This section uses a pink theme.

Section 7

This section uses a teal theme.

Section 8

This section uses an orange theme.

Section 9

This section uses a grey theme.

Step 12

Step 12 Make each card use flex

Where to put this code Add this code into style.css under the main CSS.

Code

.section-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

What this does

.section-card selects every section with the section-card class.
display turns each card into a flex container.
flex-direction controls the direction of the content inside each card.
column places the heading above the paragraph.
gap adds space between the heading and paragraph.

Expected output

Section 1

This section uses a red theme.

Section 2

This section uses an amber theme.

Section 3

This section uses a green theme.

Section 4

This section uses a blue theme.

Section 5

This section uses a purple theme.

Section 6

This section uses a pink theme.

Section 7

This section uses a teal theme.

Section 8

This section uses an orange theme.

Section 9

This section uses a grey theme.

Step 13

Step 13 Style the shared card boxes

Where to put this code Add these style lines inside the existing .section-card CSS rule in style.css.

Code

.section-card {
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;

    width: 30%;

    border-width: 2px;
    border-left-width: 10px;
    border-style: solid;

    border-radius: 8px;
}

What this does

padding adds space inside each card.
width makes each card take up 30 percent of main, so three cards can fit on one row.
border-width sets the normal border thickness.
border-left-width makes the left border thicker than the other sides.
border-style makes the border a solid line.
border-radius rounds the corners of each card.

Expected output

Section 1

This section uses a red theme.

Section 2

This section uses an amber theme.

Section 3

This section uses a green theme.

Section 4

This section uses a blue theme.

Section 5

This section uses a purple theme.

Section 6

This section uses a pink theme.

Section 7

This section uses a teal theme.

Section 8

This section uses an orange theme.

Section 9

This section uses a grey theme.

Step 14

Step 14 Add the red, amber and green colours

Where to put this code Add this code into style.css under the .section-card CSS.

Code

.red-card {
    background-color: #ffe5e5;
    border-color: #8b0000;
    border-left-color: #c1121f;
    color: #7f1d1d;
}

.amber-card {
    background-color: #fff3cd;
    border-color: #92400e;
    border-left-color: #f59e0b;
    color: #78350f;
}

.green-card {
    background-color: #e7f7e7;
    border-color: #166534;
    border-left-color: #22c55e;
    color: #14532d;
}

What this does

.red-card selects only the red themed card.
.amber-card selects only the amber themed card.
.green-card selects only the green themed card.
background-color sets each card background colour.
border-left-color sets the colour of the thick left border.

Expected output

Section 1

This section uses a red theme.

Section 2

This section uses an amber theme.

Section 3

This section uses a green theme.

Section 4

This section uses a blue theme.

Section 5

This section uses a purple theme.

Section 6

This section uses a pink theme.

Section 7

This section uses a teal theme.

Section 8

This section uses an orange theme.

Section 9

This section uses a grey theme.

Step 15

Step 15 Add the blue, purple and pink colours

Where to put this code Add this code into style.css under the green-card CSS.

Code

.blue-card {
    background-color: #dbeafe;
    border-color: #1e3a8a;
    border-left-color: #2563eb;
    color: #1e3a8a;
}

.purple-card {
    background-color: #ede9fe;
    border-color: #5b21b6;
    border-left-color: #7c3aed;
    color: #4c1d95;
}

.pink-card {
    background-color: #fce7f3;
    border-color: #9d174d;
    border-left-color: #db2777;
    color: #831843;
}

What this does

.blue-card selects only the blue themed card.
.purple-card selects only the purple themed card.
.pink-card selects only the pink themed card.
border-color sets the normal border colour for each card.
color sets the text colour for each card.

Expected output

Section 1

This section uses a red theme.

Section 2

This section uses an amber theme.

Section 3

This section uses a green theme.

Section 4

This section uses a blue theme.

Section 5

This section uses a purple theme.

Section 6

This section uses a pink theme.

Section 7

This section uses a teal theme.

Section 8

This section uses an orange theme.

Section 9

This section uses a grey theme.

Step 16

Step 16 Add the teal, orange and grey colours

Where to put this code Add this code into style.css under the pink-card CSS.

Code

.teal-card {
    background-color: #ccfbf1;
    border-color: #115e59;
    border-left-color: #14b8a6;
    color: #134e4a;
}

.orange-card {
    background-color: #ffedd5;
    border-color: #9a3412;
    border-left-color: #f97316;
    color: #7c2d12;
}

.grey-card {
    background-color: #e5e7eb;
    border-color: #374151;
    border-left-color: #6b7280;
    color: #1f2937;
}

What this does

.teal-card selects only the teal themed card.
.orange-card selects only the orange themed card.
.grey-card selects only the grey themed card.
background-color sets each card background colour.
color sets each card text colour.

Expected output

Section 1

This section uses a red theme.

Section 2

This section uses an amber theme.

Section 3

This section uses a green theme.

Section 4

This section uses a blue theme.

Section 5

This section uses a purple theme.

Section 6

This section uses a pink theme.

Section 7

This section uses a teal theme.

Section 8

This section uses an orange theme.

Section 9

This section uses a grey theme.

Step 17

Step 17 Remove the heading margins

Where to put this code Add this code into style.css under the colour section CSS.

Code

.section-card h2 {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}

What this does

.section-card h2 selects only headings inside the section cards.
margin-top removes extra space above each heading.
margin-right removes extra space on the right of each heading.
margin-bottom removes extra space below each heading.
margin-left removes extra space on the left of each heading.

Expected output

Section 1

This section uses a red theme.

Section 2

This section uses an amber theme.

Section 3

This section uses a green theme.

Section 4

This section uses a blue theme.

Section 5

This section uses a purple theme.

Section 6

This section uses a pink theme.

Section 7

This section uses a teal theme.

Section 8

This section uses an orange theme.

Section 9

This section uses a grey theme.

Step 18

Step 18 Remove the paragraph margins

Where to put this code Add this code into style.css under the .section-card h2 CSS.

Code

.section-card p {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}

What this does

.section-card p selects only paragraphs inside the section cards.
margin-top removes extra space above each paragraph.
margin-right removes extra space on the right of each paragraph.
margin-bottom removes extra space below each paragraph.
margin-left removes extra space on the left of each paragraph.

Expected output

Section 1

This section uses a red theme.

Section 2

This section uses an amber theme.

Section 3

This section uses a green theme.

Section 4

This section uses a blue theme.

Section 5

This section uses a purple theme.

Section 6

This section uses a pink theme.

Section 7

This section uses a teal theme.

Section 8

This section uses an orange theme.

Section 9

This section uses a grey theme.

Final code

Final index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nine Wrapped Flex Sections</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <main>
        <section class="section-card red-card">
            <h2>Section 1</h2>
            <p>This section uses a red theme.</p>
        </section>

        <section class="section-card amber-card">
            <h2>Section 2</h2>
            <p>This section uses an amber theme.</p>
        </section>

        <section class="section-card green-card">
            <h2>Section 3</h2>
            <p>This section uses a green theme.</p>
        </section>

        <section class="section-card blue-card">
            <h2>Section 4</h2>
            <p>This section uses a blue theme.</p>
        </section>

        <section class="section-card purple-card">
            <h2>Section 5</h2>
            <p>This section uses a purple theme.</p>
        </section>

        <section class="section-card pink-card">
            <h2>Section 6</h2>
            <p>This section uses a pink theme.</p>
        </section>

        <section class="section-card teal-card">
            <h2>Section 7</h2>
            <p>This section uses a teal theme.</p>
        </section>

        <section class="section-card orange-card">
            <h2>Section 8</h2>
            <p>This section uses an orange theme.</p>
        </section>

        <section class="section-card grey-card">
            <h2>Section 9</h2>
            <p>This section uses a grey theme.</p>
        </section>
    </main>

</body>
</html>

Final style.css

body {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    color: #222222;
}

main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;

    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;

    background-color: #cccccc;
}

.section-card {
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;

    width: 30%;

    border-width: 2px;
    border-left-width: 10px;
    border-style: solid;

    border-radius: 8px;
}

.red-card {
    background-color: #ffe5e5;
    border-color: #8b0000;
    border-left-color: #c1121f;
    color: #7f1d1d;
}

.amber-card {
    background-color: #fff3cd;
    border-color: #92400e;
    border-left-color: #f59e0b;
    color: #78350f;
}

.green-card {
    background-color: #e7f7e7;
    border-color: #166534;
    border-left-color: #22c55e;
    color: #14532d;
}

.blue-card {
    background-color: #dbeafe;
    border-color: #1e3a8a;
    border-left-color: #2563eb;
    color: #1e3a8a;
}

.purple-card {
    background-color: #ede9fe;
    border-color: #5b21b6;
    border-left-color: #7c3aed;
    color: #4c1d95;
}

.pink-card {
    background-color: #fce7f3;
    border-color: #9d174d;
    border-left-color: #db2777;
    color: #831843;
}

.teal-card {
    background-color: #ccfbf1;
    border-color: #115e59;
    border-left-color: #14b8a6;
    color: #134e4a;
}

.orange-card {
    background-color: #ffedd5;
    border-color: #9a3412;
    border-left-color: #f97316;
    color: #7c2d12;
}

.grey-card {
    background-color: #e5e7eb;
    border-color: #374151;
    border-left-color: #6b7280;
    color: #1f2937;
}

.section-card h2 {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}

.section-card p {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}