HTML en CSS leren: Items uitlijnen in hun cel

Uitlijnen in een cel

Op het scherm vult elk tentje zijn hele vak, tot tegen de haag. "Een tent zet je in het midden van je plaats," zegt Gust, "niet in de hoek." In een grid kies je zelf waar een item in zijn cel staat.

Plaatsen in hun cel

Een grid-item vult standaard zijn hele cel: het rekt uit in de breedte en in de hoogte (stretch). Met justify-items lijn je alle items uit in de rij, van links naar rechts: start, center of end. Met align-items doe je hetzelfde in de kolom, van boven naar onder. Is de cel groter dan het item, dan zie je het verschil.

place-items: center is de afkorting voor allebei. Voor één item schrijf je justify-self, align-self of place-self.

Op de pagina staat elke plaats in het midden van haar cel, die 90px hoog is.

style.css

1.terrein {2  display: grid;3  grid-template-columns: repeat(3, 1fr);4  grid-template-rows: repeat(2, 90px);5  gap: 8px;6  place-items: center;7}

camping.example

Probeer het zelf

Schuif de camper naar de rechterkant van haar cel. De andere plaatsen blijven zoals ze zijn.

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

Plaatsen in hun cel

place-items: center is de afkorting voor allebei. Voor één item schrijf je justify-self, align-self of place-self.

Op de pagina staat elke plaats in het midden van haar cel, die 90px hoog is.

style.css

1.terrein {2  display: grid;3  grid-template-columns: repeat(3, 1fr);4  grid-template-rows: repeat(2, 90px);5  gap: 8px;6  place-items: center;7}

camping.example

Probeer het zelf

Schuif de camper naar de rechterkant van haar cel. De andere plaatsen blijven zoals ze zijn.

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