Learn HTML and CSS: Several rows

Flex-wrap and gap

On the narrow little square behind the church not all the trucks fit side by side. They squeeze into one row, bumper to bumper. Nadia wants a second row, and some room to walk between them.

On to the next row

By default flex items stay in one row, even when they don't fit: then they shrink. With flex-wrap: wrap on the container they carry on to the next row, like words in a sentence.

With gap you put room between the items, never at the edges. One value applies between the rows and between the columns; with row-gap and column-gap you choose them apart.

Margins that do the same leave room at the edges too. gap doesn't.

style.css

1.square {2  display: flex;3  flex-wrap: wrap;4  gap: 8px;5}

foodtruck.example

Try it yourself

Put the menu links side by side with flexbox, with 16px of room between them.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3<head>4  <title>Wheels &amp; Meals</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="truck.svg" alt="" width="40" height="40">11    <h1>Wheels &amp; Meals</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="trucks.html">Trucks</a>15      <a href="map.html">Map</a>16      <a href="tickets.html">Tickets</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Food truck festival on Fore Street in Tiverton, 14 and 15 June.</p>21    <section class="square">22      <div class="truck chips">Chips</div>23      <div class="truck taco">Tacos</div>24      <div class="truck ice-cream">Ices</div>25      <div class="truck pizza">Pizza</div>26    </section>27    <section class="cards">28      <article class="card">29        <h2>Saturday</h2>30        <p>From 11 am to 11 pm, with live music from 8 pm.</p>31      </article>32      <article class="card">33        <h2>Sunday</h2>34        <p>From 11 am to 8 pm, with a kids’ corner.</p>35      </article>36      <article class="card">37        <h2>Entry</h2>38        <p>Free. You pay per bite.</p>39      </article>40    </section>41  </main>42  <footer>43    <p>Fore Street, Tiverton EX16 6LT</p>44  </footer>45</body>46</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8ec;5  color: #2b2118;6}7header {8  padding: 12px 16px;9  background: #264653;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27}28.square {29  margin: 16px 0;30  padding: 12px;31  border-radius: 18px;32  background-color: #efe6d4;33  background-image: radial-gradient(rgb(110 90 60 / 0.16) 1px, transparent 1.5px);34  background-size: 14px 14px;35  box-shadow: inset 0 0 0 1px rgb(110 90 60 / 0.14);36}37.square.tall {38  height: 200px;39}40.square.narrow {41  max-width: 250px;42}43/* A striped awning and two wheels: only for the look. */44.truck {45  position: relative;46  margin-bottom: 6px;47  padding: 16px 14px 12px;48  border-radius: 10px 10px 8px 8px;49  background-color: #e76f51;50  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.85) 0 7px, transparent 7px 14px);51  background-size: 100% 7px;52  background-repeat: no-repeat;53  box-shadow: 0 1px 1px rgb(43 33 24 / 0.12), 0 6px 12px -6px rgb(43 33 24 / 0.35);54  color: #ffffff;55  font-weight: 700;56}57.truck::before,58.truck::after {59  content: "";60  position: absolute;61  bottom: -5px;62  width: 10px;63  height: 10px;64  border-radius: 50%;65  background: #d9cfbb;66  box-shadow: inset 0 0 0 3px #2b2118;67}68.truck::before {69  left: 9px;70}71.truck::after {72  right: 9px;73}74.chips {75  background-color: #e9c46a;76  color: #3a2a00;77}78.taco {79  background-color: #e76f51;80}81.pizza {82  background-color: #2a9d8f;83}84.waffle {85  background-color: #9c6644;86}87.ice-cream {88  padding-top: 30px;89  padding-bottom: 26px;90  background-color: #f4a6c6;91  color: #4a1030;92}93.curry {94  background-color: #f4a261;95  color: #3a1f00;96}97.burger {98  background-color: #6d597a;99}100.soup {101  background-color: #588157;102}103.card {104  padding: 4px 16px;105  border-radius: 12px;106  background: #ffffff;107  box-shadow: 0 1px 2px rgb(43 33 24 / 0.08);108}109.card h2 {110  font-size: 1.15rem;111}112footer {113  padding: 12px 16px;114  background: #264653;115  color: #ffffff;116}

foodtruck.example

Ready for more?

The full lesson has 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

On to the next row

By default flex items stay in one row, even when they don't fit: then they shrink. With flex-wrap: wrap on the container they carry on to the next row, like words in a sentence.

With gap you put room between the items, never at the edges. One value applies between the rows and between the columns; with row-gap and column-gap you choose them apart.

Margins that do the same leave room at the edges too. gap doesn't.

style.css

1.square {2  display: flex;3  flex-wrap: wrap;4  gap: 8px;5}

foodtruck.example

Try it yourself

Put the menu links side by side with flexbox, with 16px of room between them.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3<head>4  <title>Wheels &amp; Meals</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="truck.svg" alt="" width="40" height="40">11    <h1>Wheels &amp; Meals</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="trucks.html">Trucks</a>15      <a href="map.html">Map</a>16      <a href="tickets.html">Tickets</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Food truck festival on Fore Street in Tiverton, 14 and 15 June.</p>21    <section class="square">22      <div class="truck chips">Chips</div>23      <div class="truck taco">Tacos</div>24      <div class="truck ice-cream">Ices</div>25      <div class="truck pizza">Pizza</div>26    </section>27    <section class="cards">28      <article class="card">29        <h2>Saturday</h2>30        <p>From 11 am to 11 pm, with live music from 8 pm.</p>31      </article>32      <article class="card">33        <h2>Sunday</h2>34        <p>From 11 am to 8 pm, with a kids’ corner.</p>35      </article>36      <article class="card">37        <h2>Entry</h2>38        <p>Free. You pay per bite.</p>39      </article>40    </section>41  </main>42  <footer>43    <p>Fore Street, Tiverton EX16 6LT</p>44  </footer>45</body>46</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8ec;5  color: #2b2118;6}7header {8  padding: 12px 16px;9  background: #264653;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27}28.square {29  margin: 16px 0;30  padding: 12px;31  border-radius: 18px;32  background-color: #efe6d4;33  background-image: radial-gradient(rgb(110 90 60 / 0.16) 1px, transparent 1.5px);34  background-size: 14px 14px;35  box-shadow: inset 0 0 0 1px rgb(110 90 60 / 0.14);36}37.square.tall {38  height: 200px;39}40.square.narrow {41  max-width: 250px;42}43/* A striped awning and two wheels: only for the look. */44.truck {45  position: relative;46  margin-bottom: 6px;47  padding: 16px 14px 12px;48  border-radius: 10px 10px 8px 8px;49  background-color: #e76f51;50  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.85) 0 7px, transparent 7px 14px);51  background-size: 100% 7px;52  background-repeat: no-repeat;53  box-shadow: 0 1px 1px rgb(43 33 24 / 0.12), 0 6px 12px -6px rgb(43 33 24 / 0.35);54  color: #ffffff;55  font-weight: 700;56}57.truck::before,58.truck::after {59  content: "";60  position: absolute;61  bottom: -5px;62  width: 10px;63  height: 10px;64  border-radius: 50%;65  background: #d9cfbb;66  box-shadow: inset 0 0 0 3px #2b2118;67}68.truck::before {69  left: 9px;70}71.truck::after {72  right: 9px;73}74.chips {75  background-color: #e9c46a;76  color: #3a2a00;77}78.taco {79  background-color: #e76f51;80}81.pizza {82  background-color: #2a9d8f;83}84.waffle {85  background-color: #9c6644;86}87.ice-cream {88  padding-top: 30px;89  padding-bottom: 26px;90  background-color: #f4a6c6;91  color: #4a1030;92}93.curry {94  background-color: #f4a261;95  color: #3a1f00;96}97.burger {98  background-color: #6d597a;99}100.soup {101  background-color: #588157;102}103.card {104  padding: 4px 16px;105  border-radius: 12px;106  background: #ffffff;107  box-shadow: 0 1px 2px rgb(43 33 24 / 0.08);108}109.card h2 {110  font-size: 1.15rem;111}112footer {113  padding: 12px 16px;114  background: #264653;115  color: #ffffff;116}

foodtruck.example