HTML en CSS leren: Rijen en ruimte in een grid

Rijen en gap

Gust wil gras tussen de plaatsen. "Niemand zet zijn tent graag tegen de caravan van de buren," zegt hij. En de chalets mogen wat meer ruimte krijgen dan een tentje.

Rijen en ruimte

Rijen hoef je niet te tekenen: het grid maakt er zoveel als nodig, elk zo hoog als de hoogste plaats erin. Wil je een vaste hoogte, dan geef je die met grid-template-rows, net zoals de breedte van de kolommen.

Met gap zet je ruimte tussen de rijen en tussen de kolommen, nooit langs de rand. gap: 12px geldt voor allebei. Met twee waarden komt eerst de ruimte tussen de rijen, dan die tussen de kolommen. Apart kan ook, met row-gap en column-gap.

Op de pagina is de eerste rij 90px hoog en de tweede 60px, met 12px gras tussen alle plaatsen.

style.css

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

camping.example

Probeer het zelf

Leg het terrein in drie even brede kolommen, met 12px ruimte tussen de plaatsen.

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

Rijen en ruimte

Op de pagina is de eerste rij 90px hoog en de tweede 60px, met 12px gras tussen alle plaatsen.

style.css

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

camping.example

Probeer het zelf

Leg het terrein in drie even brede kolommen, met 12px ruimte tussen de plaatsen.

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