Learn HTML and CSS: Grid or flexbox, which when

Grid or flexbox

Gus's grandson says "everyone uses grid these days". So should the menu go in a grid too? Not necessarily: every tool has its own job, and a good page uses both.

Two tools

Flexbox works in one direction: a row or a column. The items decide how wide they are, and the container shares out what's left. Ideal for a menu, a row of buttons or a header with a logo and a menu.

Grid works in two directions at once: rows and columns. You draw the tracks, and the items fall into them, neatly under each other, even when their content differs. Ideal for a site plan, a set of cards or the layout of a whole page.

On the page the menu stands side by side with flexbox, and the field in columns with grid. Often one sits inside the other.

style.css

1nav {2  display: flex;3  flex-wrap: wrap;4  gap: 4px;5}6.field {7  display: grid;8  grid-template-columns: repeat(3, 1fr);9  gap: 8px;10}

camping.example

Try it yourself

Put the links of the menu side by side with flexbox, and lay the field out in three equally wide columns with grid.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3<head>4  <title>The Lazy Hammock</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="tent.svg" alt="" width="40" height="40">11    <h1>The Lazy Hammock</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="pitches.html">Pitches</a>15      <a href="prices.html">Prices</a>16      <a href="book.html">Book</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Camping among the pines in Bala. Peace and quiet guaranteed.</p>21    <section class="field">22      <div class="pitch tent">Tent</div>23      <div class="pitch caravan">Caravan</div>24      <div class="pitch camper">Camper</div>25      <div class="pitch cabin">Cabin</div>26      <div class="pitch tent">Tent</div>27      <div class="pitch hammock">Hammock</div>28    </section>29    <section class="cards">30      <article class="card">31        <h2>Showers</h2>32        <p>Hot showers and a washing-up area, open all day.</p>33      </article>34      <article class="card">35        <h2>Shop</h2>36        <p>Fresh bread every morning from 8 am.</p>37      </article>38      <article class="card">39        <h2>Lake</h2>40        <p>Swimming in summer, fishing all year round.</p>41      </article>42    </section>43  </main>44  <footer>45    <p>1 Hammock Lane, Bala LL23 7SR</p>46  </footer>47</body>48</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f5f2e8;5  color: #1f2a22;6}7header {8  padding: 12px 16px;9  background: #2d4a3a;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.field {29  margin: 16px 0;30  padding: 9px;31  border-radius: 18px;32  background-color: #bcd6a0;33  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.13) 0 20px, transparent 20px 40px);34  box-shadow: inset 0 0 0 1px rgb(45 74 58 / 0.16);35}36/* A little tent, caravan or cabin on every pitch: only for the look. */37.pitch {38  position: relative;39  margin: 3px;40  padding: 27px 4px 9px;41  border-radius: 12px;42  background: #fffdf6;43  box-shadow: 0 1px 2px rgb(31 42 34 / 0.12), 0 6px 14px -8px rgb(31 42 34 / 0.4);44  font-size: 0.875rem;45  font-weight: 700;46  line-height: 1.25;47  text-align: center;48}49.pitch::before {50  content: "";51  position: absolute;52  top: 9px;53  left: 50%;54  width: 16px;55  height: 12px;56  margin-left: -8px;57  background: #e07a3f;58  clip-path: polygon(50% 0, 100% 100%, 0 100%);59}60.caravan::before {61  width: 18px;62  margin-left: -9px;63  border-radius: 5px 5px 3px 3px;64  background: #3d8c95;65  clip-path: none;66}67.camper::before {68  width: 20px;69  margin-left: -10px;70  background: #4f7cac;71  clip-path: polygon(0 15%, 68% 15%, 100% 55%, 100% 100%, 0 100%);72}73.cabin::before {74  background: #9c6b3f;75  clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%);76}77.hammock::before {78  top: 11px;79  width: 20px;80  height: 7px;81  margin-left: -10px;82  border-bottom: 3px solid #c99a2e;83  border-radius: 0 0 10px 10px;84  background: none;85  clip-path: none;86}87.reception::before {88  width: 14px;89  height: 14px;90  margin-left: -7px;91  border-radius: 50%;92  background: #2d4a3a;93  clip-path: none;94}95.lake::before {96  top: 10px;97  width: 24px;98  height: 11px;99  margin-left: -12px;100  border-radius: 50%;101  background: #5fa8d3;102  clip-path: none;103}104.playground::before {105  width: 18px;106  margin-left: -9px;107  background: #d1495b;108  clip-path: polygon(50% 0, 100% 100%, 82% 100%, 50% 32%, 18% 100%, 0 100%);109}110aside {111  padding: 12px 16px;112  background: #e4ecd6;113}114aside h2 {115  margin: 4px 0 8px;116  font-size: 1.05rem;117}118.card {119  padding: 4px 16px;120  border-radius: 12px;121  background: #ffffff;122  box-shadow: 0 1px 2px rgb(31 42 34 / 0.08);123}124.card h2 {125  font-size: 1.15rem;126}127footer {128  padding: 12px 16px;129  background: #2d4a3a;130  color: #ffffff;131}

camping.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

Two tools

On the page the menu stands side by side with flexbox, and the field in columns with grid. Often one sits inside the other.

style.css

1nav {2  display: flex;3  flex-wrap: wrap;4  gap: 4px;5}6.field {7  display: grid;8  grid-template-columns: repeat(3, 1fr);9  gap: 8px;10}

camping.example

Try it yourself

Put the links of the menu side by side with flexbox, and lay the field out in three equally wide columns with grid.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3<head>4  <title>The Lazy Hammock</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="tent.svg" alt="" width="40" height="40">11    <h1>The Lazy Hammock</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="pitches.html">Pitches</a>15      <a href="prices.html">Prices</a>16      <a href="book.html">Book</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Camping among the pines in Bala. Peace and quiet guaranteed.</p>21    <section class="field">22      <div class="pitch tent">Tent</div>23      <div class="pitch caravan">Caravan</div>24      <div class="pitch camper">Camper</div>25      <div class="pitch cabin">Cabin</div>26      <div class="pitch tent">Tent</div>27      <div class="pitch hammock">Hammock</div>28    </section>29    <section class="cards">30      <article class="card">31        <h2>Showers</h2>32        <p>Hot showers and a washing-up area, open all day.</p>33      </article>34      <article class="card">35        <h2>Shop</h2>36        <p>Fresh bread every morning from 8 am.</p>37      </article>38      <article class="card">39        <h2>Lake</h2>40        <p>Swimming in summer, fishing all year round.</p>41      </article>42    </section>43  </main>44  <footer>45    <p>1 Hammock Lane, Bala LL23 7SR</p>46  </footer>47</body>48</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f5f2e8;5  color: #1f2a22;6}7header {8  padding: 12px 16px;9  background: #2d4a3a;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.field {29  margin: 16px 0;30  padding: 9px;31  border-radius: 18px;32  background-color: #bcd6a0;33  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.13) 0 20px, transparent 20px 40px);34  box-shadow: inset 0 0 0 1px rgb(45 74 58 / 0.16);35}36/* A little tent, caravan or cabin on every pitch: only for the look. */37.pitch {38  position: relative;39  margin: 3px;40  padding: 27px 4px 9px;41  border-radius: 12px;42  background: #fffdf6;43  box-shadow: 0 1px 2px rgb(31 42 34 / 0.12), 0 6px 14px -8px rgb(31 42 34 / 0.4);44  font-size: 0.875rem;45  font-weight: 700;46  line-height: 1.25;47  text-align: center;48}49.pitch::before {50  content: "";51  position: absolute;52  top: 9px;53  left: 50%;54  width: 16px;55  height: 12px;56  margin-left: -8px;57  background: #e07a3f;58  clip-path: polygon(50% 0, 100% 100%, 0 100%);59}60.caravan::before {61  width: 18px;62  margin-left: -9px;63  border-radius: 5px 5px 3px 3px;64  background: #3d8c95;65  clip-path: none;66}67.camper::before {68  width: 20px;69  margin-left: -10px;70  background: #4f7cac;71  clip-path: polygon(0 15%, 68% 15%, 100% 55%, 100% 100%, 0 100%);72}73.cabin::before {74  background: #9c6b3f;75  clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%);76}77.hammock::before {78  top: 11px;79  width: 20px;80  height: 7px;81  margin-left: -10px;82  border-bottom: 3px solid #c99a2e;83  border-radius: 0 0 10px 10px;84  background: none;85  clip-path: none;86}87.reception::before {88  width: 14px;89  height: 14px;90  margin-left: -7px;91  border-radius: 50%;92  background: #2d4a3a;93  clip-path: none;94}95.lake::before {96  top: 10px;97  width: 24px;98  height: 11px;99  margin-left: -12px;100  border-radius: 50%;101  background: #5fa8d3;102  clip-path: none;103}104.playground::before {105  width: 18px;106  margin-left: -9px;107  background: #d1495b;108  clip-path: polygon(50% 0, 100% 100%, 82% 100%, 50% 32%, 18% 100%, 0 100%);109}110aside {111  padding: 12px 16px;112  background: #e4ecd6;113}114aside h2 {115  margin: 4px 0 8px;116  font-size: 1.05rem;117}118.card {119  padding: 4px 16px;120  border-radius: 12px;121  background: #ffffff;122  box-shadow: 0 1px 2px rgb(31 42 34 / 0.08);123}124.card h2 {125  font-size: 1.15rem;126}127footer {128  padding: 12px 16px;129  background: #2d4a3a;130  color: #ffffff;131}

camping.example