Flexbox and grid, finally understood

justify-content or align-items? 1fr or 33%? Flexbox and grid are the most powerful parts of CSS, and the parts people doubt most often.

In Lurndo you see what every property does. You put food trucks on their pitches and tents in their spots at the campsite, and the items slide along as you type.

Start free with the first lessonNo account needed · a lesson takes a few minutes

Why Lurndo suits you

You see the axes
The inspector draws the main axis and the cross axis of flexbox, and the numbered lines and areas of grid. That way you see why an item ends up where it does.
Puzzles that build up
Every target spot shows as a dashed outline with a number in the page. You put the items in place with a few lines on the container.
No detours with fixed sizes
Pushing an item into place with a fixed margin doesn't work. The check also tries your code with an extra item or another order.
From puzzle to real page
You end with a menu bar, cards in a row and a whole page layout that fits every screen.

Your first flexbox

Put the food trucks on the square side by side, spread across the whole width: the first on the left, the last on the right.

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

How you practise

Module 6 is about flexbox, module 7 about grid, each in nine lessons. If you don't know the basics of CSS yet, start with the first modules.

Stuck? Ask Lurnie

Lurnie is your AI coach in every lesson. Ask your question during or after an exercise and get an explanation at your level, straight away.

During or after any exerciseLurnie knows which lesson and exercise you're on. Ask why something works, what a mistake means or how else you could do it.
Fresh examples, never the solutionLurnie explains with an example on different data and helps you on with a question to think about. That way you find the solution yourself, and it sticks.
Your conversations are keptRead back later what Lurnie explained. Your conversations stay with your account, course by course.

Lurnie comes with premium, with 30 questions a day.See premium

LurnieYour HTML & CSS coach

Why won't my link turn red? My rule is right there.

Most likely another rule wins. When two rules pick the same element, the more specific one wins: nav a beats a, even if a comes later in your file. Only when they're equal does the last one win.

So look for a selector that points at your link more precisely than yours. Which one do you find?

29 of 30 questions left todayLurnie can make mistakes.

An example of a conversation with Lurnie

Frequently asked questions

What's the difference between flexbox and grid?

Flexbox puts items on one line, like a menu bar or cards in a row. Grid divides an area into rows and columns at once, like a photo gallery or a whole page. Module 7 has a lesson on when to pick which.

Do I need to know the rest of CSS first?

You need to know what a CSS rule looks like and what a class is. You learn that in module 2, which is free.

Are the flexbox and grid modules free?

Modules 1 to 3 are free. Flexbox and grid are part of premium, together with the puzzles and daily challenges of those modules.

Does it work on a phone too?

Yes. Every puzzle is checked on a phone and on a big screen, and you can practise on both.

Put the first truck in its place

Your first flexbox is done within a minute. No account, nothing to install.

Start free with the first lesson

Flexbox and grid, finally understood

justify-content or align-items? 1fr or 33%? Flexbox and grid are the most powerful parts of CSS, and the parts people doubt most often.

In Lurndo you see what every property does. You put food trucks on their pitches and tents in their spots at the campsite, and the items slide along as you type.

Start free with the first lessonNo account needed · a lesson takes a few minutes

Why Lurndo suits you

You see the axes

The inspector draws the main axis and the cross axis of flexbox, and the numbered lines and areas of grid. That way you see why an item ends up where it does.

Puzzles that build up

Every target spot shows as a dashed outline with a number in the page. You put the items in place with a few lines on the container.

No detours with fixed sizes

Pushing an item into place with a fixed margin doesn't work. The check also tries your code with an extra item or another order.

From puzzle to real page

You end with a menu bar, cards in a row and a whole page layout that fits every screen.