CSS Grid-speeltuin

Over CSS Grid-speeltuin

De CSS Grid Playground stelt echte grid-layouts visueel samen. Voeg kolom- en rijtracks toe of verwijder ze om grid-template-columns en grid-template-rows vorm te geven, stel de kolom- en rijafstanden in en verfijn alle vier de uitlijningseigenschappen — justify-items, align-items, justify-content en align-content — terwijl de voorbeeldweergave elke wijziging direct toont.

Itemplaatsing is waar grids echt krachtig worden: voeg items toe, klik er een aan in de voorbeeldweergave om het te selecteren, en positioneer het met column start, column span, row start en row span. Zo bouw je zijbalken, headers en uitgelichte cellen die meerdere tracks overspannen — de techniek achter vrijwel elke praktische grid-layout.

Drie presets — holy grail, dashboard en gallery — laden klassieke paginastructuren die je kunt ontleden en aanpassen. Zodra de layout klopt, kopieer je de gegenereerde CSS, met daarin de complete grid-containerregels en de plaatsing van elk item.

Hoe gebruik je CSS Grid-speeltuin

1. Voeg kolom- en rijtracks toe of verwijder ze om het grid-template te definiëren.
2. Stel de kolom- en rijafstand in.
3. Pas de uitlijningsopties aan: justify-items, align-items, justify-content en align-content.
4. Voeg items toe, klik er een aan in de voorbeeldweergave en stel de kolom-/rijstart en -overspanning in om het te plaatsen.
5. Laad de preset holy grail, dashboard of gallery om een klassieke layout te bestuderen.
6. Kopieer de gegenereerde CSS naar je stylesheet.

Veelgestelde vragen