HTML en CSS leren: Een paginalayout met grid

Een volledige paginalayout

Gust wil een vernieuwde startpagina, met een zijbalk voor het weer en de uren van de receptie. "Kun je de hele pagina zo netjes indelen als het terrein?" Met grid kan dat: van de pagina maak je ook een plattegrond.

Het skelet van een pagina

Grid is niet alleen voor de plaatsen: je deelt er ook de hele pagina mee in. Maak van body een grid en teken de vlakken met grid-template-areas: de kop bovenaan, de inhoud met een zijbalk ernaast, de voet onderaan. Elk blok krijgt zijn vlak met grid-area.

De zijbalk krijgt een vaste breedte, de inhoud neemt de rest met 1fr. Binnen die vlakken werk je verder met wat past: grid voor het terrein, flexbox voor een menu.

style.css

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

camping.example

Probeer het zelf

Bouw de kaarten van het ontwerp na: twee even brede kolommen met 12px ruimte, en de eerste kaart over de hele breedte.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3<head>4  <title>De Luie Hangmat</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>De Luie Hangmat</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="plaatsen.html">Plaatsen</a>15      <a href="prijzen.html">Prijzen</a>16      <a href="boeken.html">Boeken</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Kamperen tussen de dennen in Bree. Rust gegarandeerd.</p>21    <section class="terrein">22      <div class="plaats tent">Tent</div>23      <div class="plaats caravan">Caravan</div>24      <div class="plaats camper">Camper</div>25      <div class="plaats chalet">Chalet</div>26      <div class="plaats tent">Tent</div>27      <div class="plaats hangmat">Hangmat</div>28    </section>29    <section class="kaarten">30      <article class="kaart">31        <h2>Sanitair</h2>32        <p>Warme douches en een afwasplaats, de hele dag open.</p>33      </article>34      <article class="kaart">35        <h2>Winkeltje</h2>36        <p>Vers brood elke ochtend vanaf 8 uur.</p>37      </article>38      <article class="kaart">39        <h2>Vijver</h2>40        <p>Zwemmen in de zomer, vissen het hele jaar.</p>41      </article>42    </section>43  </main>44  <footer>45    <p>Hangmatweg 1, 3960 Bree</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.terrein {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/* Een tentje, caravan of chalet op elke plaats: alleen voor de sier. */37.plaats {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.plaats::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.chalet::before {74  background: #9c6b3f;75  clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%);76}77.hangmat::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.receptie::before {88  width: 14px;89  height: 14px;90  margin-left: -7px;91  border-radius: 50%;92  background: #2d4a3a;93  clip-path: none;94}95.vijver::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.speeltuin::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.kaart {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.kaart h2 {125  font-size: 1.15rem;126}127footer {128  padding: 12px 16px;129  background: #2d4a3a;130  color: #ffffff;131}

camping.example

Klaar voor meer?

De volledige les heeft 4 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Het skelet van een pagina

De zijbalk krijgt een vaste breedte, de inhoud neemt de rest met 1fr. Binnen die vlakken werk je verder met wat past: grid voor het terrein, flexbox voor een menu.

style.css

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

camping.example

Probeer het zelf

Bouw de kaarten van het ontwerp na: twee even brede kolommen met 12px ruimte, en de eerste kaart over de hele breedte.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3<head>4  <title>De Luie Hangmat</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>De Luie Hangmat</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="plaatsen.html">Plaatsen</a>15      <a href="prijzen.html">Prijzen</a>16      <a href="boeken.html">Boeken</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Kamperen tussen de dennen in Bree. Rust gegarandeerd.</p>21    <section class="terrein">22      <div class="plaats tent">Tent</div>23      <div class="plaats caravan">Caravan</div>24      <div class="plaats camper">Camper</div>25      <div class="plaats chalet">Chalet</div>26      <div class="plaats tent">Tent</div>27      <div class="plaats hangmat">Hangmat</div>28    </section>29    <section class="kaarten">30      <article class="kaart">31        <h2>Sanitair</h2>32        <p>Warme douches en een afwasplaats, de hele dag open.</p>33      </article>34      <article class="kaart">35        <h2>Winkeltje</h2>36        <p>Vers brood elke ochtend vanaf 8 uur.</p>37      </article>38      <article class="kaart">39        <h2>Vijver</h2>40        <p>Zwemmen in de zomer, vissen het hele jaar.</p>41      </article>42    </section>43  </main>44  <footer>45    <p>Hangmatweg 1, 3960 Bree</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.terrein {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/* Een tentje, caravan of chalet op elke plaats: alleen voor de sier. */37.plaats {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.plaats::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.chalet::before {74  background: #9c6b3f;75  clip-path: polygon(50% 0, 100% 45%, 100% 100%, 0 100%, 0 45%);76}77.hangmat::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.receptie::before {88  width: 14px;89  height: 14px;90  margin-left: -7px;91  border-radius: 50%;92  background: #2d4a3a;93  clip-path: none;94}95.vijver::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.speeltuin::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.kaart {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.kaart h2 {125  font-size: 1.15rem;126}127footer {128  padding: 12px 16px;129  background: #2d4a3a;130  color: #ffffff;131}

camping.example