HTML en CSS leren: Een item op de lijnen van het grid zetten

Plaatsen op lijnen

Een chalet neemt meer plaats in dan een tentje, en de hangmat hangt tussen de bomen aan de rand van het terrein. Gust wil ze op het scherm ook zo zien. Dat doe je met de genummerde lijnen.

Op de lijnen

Elk grid-item kun je zelf plaatsen, op de genummerde lijnen. grid-column: 1 / 3 betekent: van lijn 1 tot lijn 3, dus twee kolommen breed. grid-row doet hetzelfde voor de rijen. Lijn -1 is altijd de laatste: met 1 / -1 loopt een item over de hele breedte.

Wil je alleen een breedte, zonder vaste lijn, dan schrijf je span: grid-column: span 2 is twee kolommen breed, vanaf waar het item vanzelf zou komen.

Op de pagina loopt het chalet van lijn 1 tot lijn 3. De andere plaatsen schuiven op naar de cellen die vrij blijven.

style.css

1.terrein {2  display: grid;3  grid-template-columns: repeat(3, 1fr);4  gap: 8px;5}6.chalet {7  grid-column: 1 / 3;8}

camping.example

Probeer het zelf

Laat het chalet twee kolommen breed zijn en de hangmat over de hele breedte lopen.

1.terrein {2  display: grid;3  grid-template-columns: repeat(3, 1fr);4  gap: 8px;5}

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

Op de lijnen

Wil je alleen een breedte, zonder vaste lijn, dan schrijf je span: grid-column: span 2 is twee kolommen breed, vanaf waar het item vanzelf zou komen.

Op de pagina loopt het chalet van lijn 1 tot lijn 3. De andere plaatsen schuiven op naar de cellen die vrij blijven.

style.css

1.terrein {2  display: grid;3  grid-template-columns: repeat(3, 1fr);4  gap: 8px;5}6.chalet {7  grid-column: 1 / 3;8}

camping.example

Probeer het zelf

Laat het chalet twee kolommen breed zijn en de hangmat over de hele breedte lopen.

1.terrein {2  display: grid;3  grid-template-columns: repeat(3, 1fr);4  gap: 8px;5}

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