HTML en CSS leren: Grid

Display grid

Gust wijst naar het bord aan de receptie: drie kolommen plaatsen, netjes in rijen. Op de website staat alles in één kolom. Met grid teken je eerst de kolommen, en de plaatsen vallen er vanzelf in.

Een gridcontainer

Met display: grid maak je van een element een gridcontainer, en zijn kinderen worden grid-items. Anders dan bij flexbox zie je dan nog niets veranderen: een grid heeft standaard één kolom.

De kolommen teken je zelf met grid-template-columns: één maat per kolom, met spaties ertussen. Drie maten geven drie kolommen. De items vullen de cellen van links naar rechts, en is een rij vol, dan begint de volgende.

Op de pagina zie je de genummerde lijnen van het grid: rond drie kolommen staan vier lijnen.

style.css

1.terrein {2  display: grid;3  grid-template-columns: 80px 80px 80px;4}

camping.example

Probeer het zelf

Leg de plaatsen op het terrein in drie kolommen van 80px.

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 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Een gridcontainer

Op de pagina zie je de genummerde lijnen van het grid: rond drie kolommen staan vier lijnen.

style.css

1.terrein {2  display: grid;3  grid-template-columns: 80px 80px 80px;4}

camping.example

Probeer het zelf

Leg de plaatsen op het terrein in drie kolommen van 80px.

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