Learn HTML and CSS: Rows and space in a grid

Rows and gap

Gus wants grass between the pitches. "Nobody likes pitching their tent against the neighbours' caravan," he says. And the cabins could do with a bit more room than a little tent.

Rows and space

You don't have to draw rows: the grid makes as many as it needs, each as tall as the tallest pitch in it. If you want a fixed height, you give it with grid-template-rows, just like the width of the columns.

With gap you put space between the rows and between the columns, never along the edge. gap: 12px counts for both. With two values the space between the rows comes first, then the space between the columns. Separately works too, with row-gap and column-gap.

On the page the first row is 90px tall and the second 60px, with 12px of grass between all the pitches.

style.css

1.field {2  display: grid;3  grid-template-columns: repeat(3, 1fr);4  grid-template-rows: 90px 60px;5  gap: 12px;6}

camping.example

Try it yourself

Lay the field out in three equally wide columns, with 12px of space between the pitches.

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

Rows and space

On the page the first row is 90px tall and the second 60px, with 12px of grass between all the pitches.

style.css

1.field {2  display: grid;3  grid-template-columns: repeat(3, 1fr);4  grid-template-rows: 90px 60px;5  gap: 12px;6}

camping.example

Try it yourself

Lay the field out in three equally wide columns, with 12px of space between the pitches.

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