Gap en gridplaatsing
Voeg met gap ruimte tussen gridcellen toe en plaats items met grid-column en grid-row.
Gap en gridplaatsing is een gratis CSS Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
Tussenruimte in CSS Grid
De eigenschap gap stelt de ruimte tussen rasterrijen en -kolommen in. Deze vervangt de oudere eigenschap grid-gap en werkt ook in Flexbox.
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>row-gap en column-gap
Stel de tussenruimten voor rijen en kolommen afzonderlijk in:
<div class="grid" style="display:grid;grid-template-columns:repeat(3, 1fr);">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>Nummers van rasterlijnen
CSS Grid nummert zijn lijnen vanaf 1. Een raster met drie kolommen heeft kolomlijnen 1, 2, 3 en 4. Negatieve nummers tellen vanaf het einde: -1 is de laatste lijn en -2 de voorlaatste.
grid-column en grid-row
Plaats elementen handmatig met lijnnummers via grid-column en grid-row:
<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:8px;">
<div class="header" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (spans all 3 columns, row 1)</div>
<div class="main" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (spans 2 columns, row 2)</div>
</div>Het sleutelwoord span
Gebruik span om aan te geven over hoeveel tracks een element zich moet uitstrekken, in plaats van absolute lijnnummers te gebruiken:
<div style="display:grid;grid-template-columns:repeat(4, 60px);grid-auto-rows:60px;gap:8px;">
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div class="featured" style="background:#4f8cff22;border:1px solid #4f8cff;padding:4px;">Featured (span 2x2)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>Negatieve lijnnummers
Negatieve indexen tellen vanaf het einde. 1 / -1 beslaat altijd de volledige rasterbreedte, ongeacht het aantal kolommen:
<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
<div class="full-width" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Full width (grid-column: 1 / -1)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item</div>
</div>Verkorte notatie van grid-area
grid-area stelt alle vier de plaatsingswaarden van het raster in met één eigenschap: row-start / column-start / row-end / column-end.
<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:0;">
<div class="hero" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Hero (row 1 start, col 1 start, row 2 end, last column)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>Automatische plaatsing
Elementen die niet expliciet zijn geplaatst, worden automatisch in de eerstvolgende beschikbare cel geplaatst volgens het algoritme van grid-auto-flow. Standaard vult de browser de cellen van links naar rechts en van boven naar beneden.
justify-items en align-items in Grid
In een rastercontainer lijnt justify-items de celinhoud horizontaal uit en lijnt align-items deze verticaal uit. Beide hebben standaard de waarde stretch.
<div class="grid" style="min-height:120px;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;width:fit-content;">centered, top-aligned item</div>
</div>justify-self en align-self
Afzonderlijke rasterelementen kunnen de uitlijning van de container overschrijven met justify-self en align-self:
<div style="display:grid;grid-template-columns:1fr;min-height:120px;">
<div class="featured-card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Stretched horizontally, centered vertically</div>
</div>Overlappende rasterelementen
Meerdere elementen kunnen dezelfde rastercel innemen. Gebruik z-index om te bepalen welk element bovenaan verschijnt. Zo kun je gelaagde ontwerpen maken, zoals een afbeelding met tekst eroverheen.
<div style="display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 60px);">
<div class="image" style="background:#4f8cff44;border:1px solid #4f8cff;">Image layer</div>
<div class="caption" style="background:rgba(0,0,0,0.6);color:#fff;align-self:end;padding:4px 8px;">Caption overlay</div>
</div>Korte controle
Een element heeft grid-column: 2 / span 3. Welke kolommen neemt het in beslag in een raster met vijf kolommen?
Samenvatting
gap voegt tussenruimten tussen rastercellen toe. Elementen worden met lijnnummers geplaatst via grid-column en grid-row. Het sleutelwoord span geeft aan hoeveel tracks een element moet beslaan. Gebruik 1 / -1 om altijd alle kolommen te beslaan. Rasterelementen kunnen elkaar overlappen met z-index.
Leer CSS met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “Gap en gridplaatsing” gratis?
Ja — de volledige tekst van “Gap en gridplaatsing” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Gap en gridplaatsing”?
Voeg met gap ruimte tussen gridcellen toe en plaats items met grid-column en grid-row. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met CSS Academy te beginnen?
Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Gap en gridplaatsing”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over CSS Academy?
Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Display, grid en templatekolommen en -rijen
- De fr-eenheid en repeat
- Gap en gridplaatsing
- Grid-template-areas