CSS Academy · Les

Impliciet grid en grid-auto-flow

Krijg inzicht in hoe CSS Grid items buiten expliciete tracks verwerkt met impliciete rijen en kolommen.

Les 3 van 413 stappen

Impliciet grid en grid-auto-flow 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.

Expliciet versus impliciet raster

Het expliciete raster wordt gedefinieerd door grid-template-columns en grid-template-rows. Wanneer elementen buiten deze gedefinieerde sporen vallen, maakt de browser automatisch impliciete sporen aan.

grid-auto-rows

Definieert de grootte van impliciet aangemaakte rijsporen. Zonder deze eigenschap worden impliciete rijen zo groot gemaakt dat hun inhoud past (auto).

  <div class="gallery">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

grid-auto-rows met minmax

Maak impliciete rijen minstens een bepaalde hoogte, maar laat ze wel groter worden:

  <div class="feed">
    <div>1</div><div>2</div><div>3</div>
  </div>

grid-auto-columns

Definieert de grootte van impliciete kolomsporen wanneer elementen buiten het bereik van de expliciete kolommen worden geplaatst:

  <div class="timeline">
    <div>Event 1</div><div>Event 2</div>
  </div>

grid-auto-flow

Regelt hoe het algoritme voor automatische plaatsing elementen positioneert:

row (standaard) — plaats elementen in rijen en voeg zo nodig nieuwe rijen toe
column — plaats elementen in kolommen en voeg nieuwe kolommen toe
row dense — vul gaten zo veel mogelijk op door terug te zoeken
column dense — vul gaten dicht in de kolomrichting

grid-auto-flow: dense

Met dense probeert het algoritme gaten op te vullen die door elementen met een grote overspanning zijn achtergelaten. Daardoor kunnen elementen buiten de oorspronkelijke volgorde verschijnen.

  <div class="masonry">
    <div class="featured">Featured</div><div>2</div><div>3</div><div>4</div>
  </div>

Patroon voor automatische plaatsing in kolommen

Horizontaal scrollende kaartstrook waarin kolommen naar behoefte groeien:

  <div class="strip">
    <div>Card 1</div><div>Card 2</div><div>Card 3</div>
  </div>

Dichte vulling voor een galerij

Een fotogalerij met elementen van verschillende grootten die gaten opvult:

  <div class="gallery">
    <div class="wide">Wide</div>
    <div class="tall">Tall</div>
    <div>3</div><div>4</div>
  </div>

Impliciet raster en benoemde gebieden

Benoemde gebieden zijn alleen van toepassing op het expliciete raster. Elementen in het impliciete raster kunnen niet rechtstreeks met een benoemd gebied worden geplaatst — daarvoor zijn lijnnummers of span-plaatsing nodig.

Het impliciete raster zichtbaar maken

In de Chrome DevTools toont de layout-overlay zowel expliciete (ononderbroken) als impliciete (gestreepte) rasterlijnen. Zo begrijp je beter waar automatisch geplaatste elementen terechtkomen.

Impliciete grootte per element regelen

Elementen die meerdere rijen in het impliciete raster overspannen, hebben grid-auto-rows nodig om correct te worden gedimensioneerd. Zonder deze eigenschap worden impliciete rijen aangepast aan hun inhoud, wat ongelijke indelingen kan veroorzaken.

Korte controle

Wat doet grid-auto-flow: row dense?

Beantwoord dit in de interactieve les

Samenvatting

Het impliciete raster breidt het expliciete raster uit met automatisch aangemaakte sporen. Met grid-auto-rows/columns regel je hun grootte; minmax() maakt ze flexibel. grid-auto-flow bepaalt de plaatsingsrichting. Met dense worden gaten agressief opgevuld — handig voor metselwerkachtige indelingen, maar dit kan de visuele volgorde doorbreken.

Gratis beginnen

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

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Impliciet grid en grid-auto-flow” gratis?

Ja — de volledige tekst van “Impliciet grid en grid-auto-flow” 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 “Impliciet grid en grid-auto-flow”?

Krijg inzicht in hoe CSS Grid items buiten expliciete tracks verwerkt met impliciete rijen en kolommen. 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 “Impliciet grid en grid-auto-flow”?

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

← Terug naar CSS Academy