Learn HTML and CSS: A page layout with grid

A whole page layout

Gus wants a new home page, with a sidebar for the weather and the opening hours of reception. "Can you lay the whole page out as neatly as the field?" With grid you can: you make a site plan of the page too.

The skeleton of a page

Grid isn't only for the pitches: you lay out the whole page with it too. Turn body into a grid and draw the areas with grid-template-areas: the header at the top, the content with a sidebar next to it, the footer at the bottom. Every block gets its area with grid-area.

The sidebar gets a fixed width, the content takes the rest with 1fr. Inside those areas you carry on with whatever fits: grid for the field, flexbox for a menu.

style.css

1body {2  display: grid;3  grid-template-columns: 1fr 120px;4  grid-template-areas:5    "header header"6    "content sidebar"7    "footer footer";8}9header { grid-area: header; }10main { grid-area: content; }11aside { grid-area: sidebar; }12footer { grid-area: footer; }13.field {14  display: grid;15  grid-template-columns: repeat(2, 1fr);16  gap: 8px;17}

camping.example

Try it yourself

Build the cards of the design: two equally wide columns with 12px of space, and the first card across the whole width.

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 4 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

The skeleton of a page

The sidebar gets a fixed width, the content takes the rest with 1fr. Inside those areas you carry on with whatever fits: grid for the field, flexbox for a menu.

style.css

1body {2  display: grid;3  grid-template-columns: 1fr 120px;4  grid-template-areas:5    "header header"6    "content sidebar"7    "footer footer";8}9header { grid-area: header; }10main { grid-area: content; }11aside { grid-area: sidebar; }12footer { grid-area: footer; }13.field {14  display: grid;15  grid-template-columns: repeat(2, 1fr);16  gap: 8px;17}

camping.example

Try it yourself

Build the cards of the design: two equally wide columns with 12px of space, and the first card across the whole width.

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