Learn HTML and CSS: Putting an item on the lines of the grid

Placing on lines

A cabin takes up more room than a little tent, and the hammock hangs between the trees at the edge of the field. Gus wants to see that on the screen too. You do it with the numbered lines.

On the lines

You can place every grid item yourself, on the numbered lines. grid-column: 1 / 3 means: from line 1 to line 3, so two columns wide. grid-row does the same for the rows. Line -1 is always the last one: with 1 / -1 an item runs across the whole width.

If you only want a width, without a fixed line, you write span: grid-column: span 2 is two columns wide, from wherever the item would land by itself.

On the page the cabin runs from line 1 to line 3. The other pitches move on to the cells that stay free.

style.css

1.field {2  display: grid;3  grid-template-columns: repeat(3, 1fr);4  gap: 8px;5}6.cabin {7  grid-column: 1 / 3;8}

camping.example

Try it yourself

Make the cabin two columns wide and let the hammock run across the whole width.

1.field {2  display: grid;3  grid-template-columns: repeat(3, 1fr);4  gap: 8px;5}

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

On the lines

If you only want a width, without a fixed line, you write span: grid-column: span 2 is two columns wide, from wherever the item would land by itself.

On the page the cabin runs from line 1 to line 3. The other pitches move on to the cells that stay free.

style.css

1.field {2  display: grid;3  grid-template-columns: repeat(3, 1fr);4  gap: 8px;5}6.cabin {7  grid-column: 1 / 3;8}

camping.example

Try it yourself

Make the cabin two columns wide and let the hammock run across the whole width.

1.field {2  display: grid;3  grid-template-columns: repeat(3, 1fr);4  gap: 8px;5}

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