Gridkolommen definiëren

CSS Grid is een tweedimensionaal indelingssysteem waarmee je items tegelijkertijd in rijen en kolommen kunt plaatsen. Tailwind CSS biedt hulpprogrammaklassen die rechtstreeks overeenkomen met eigenschappen van CSS Grid, zodat je nooit zelf display: grid of grid-template-columns hoeft te schrijven. Je voegt gewoon de juiste klassennamen toe aan je HTML-elementen.

Pas de klasse grid toe om van een element een rastercontainer te maken. Zonder kolomdefinitie worden alle kinderen standaard in één kolom onder elkaar geplaatst. Dit is het startpunt voor elke Tailwind Grid-indeling: elk rasterhulpprogramma dat je toevoegt, bouwt voort op de klasse grid.

Tailwind biedt grid-cols-1 tot en met grid-cols-12 om de container op te delen in kolommen met dezelfde breedte. Onder de motorkap wordt grid-cols-3 gecompileerd naar grid-template-columns: repeat(3, minmax(0, 1fr)). Dit betekent dat alle kolommen de beschikbare breedte gelijk verdelen, waardoor deze indeling perfect is voor rasters met kaarten en secties met functies.

Verschillende aantallen kolommen zijn geschikt voor verschillende toepassingen. Een raster met 2 kolommen werkt goed voor secties met opgesplitste inhoud, 3 kolommen voor rijen met functies en 4 of 6 kolommen voor product- of afbeeldingsgalerijen. Tailwind ondersteunt elk geheel getal van 1 tot en met 12. Je hebt daarmee hetzelfde bereik als in het rastersysteem van Bootstrap, maar zonder wrappers voor rijen.

Het raster met 12 kolommen is een klassieke ontwerpconventie, omdat 12 deelbaar is door 1, 2, 3, 4 en 6. Dat geeft je veel flexibiliteit bij het ontwerpen van indelingen. Met Tailwinds grid-cols-12 neemt elk onderliggend element standaard één kolom in beslag. Vervolgens gebruik je col-span-* op afzonderlijke onderliggende elementen om ze meerdere kolommen te laten beslaan. Dit bekijken we in de volgende les.

Als de vooraf gedefinieerde presets van 1 tot en met 12 niet voldoende zijn, gebruik je grid-cols-none om elke kolomsjabloon te verwijderen. Definieer daarna je eigen sjabloon met willekeurige waarden via grid-cols-[...]. Met de notatie tussen vierkante haken kun je elke geldige CSS-waarde voor grid-template-columns rechtstreeks in een klassenaam schrijven. Zo krijg je onbeperkte flexibiliteit zonder HTML te verlaten.

Moderne browsers ondersteunen het sleutelwoord subgrid, waarmee een genest raster de kolomsporen van het bovenliggende raster kan overnemen. Tailwind v3.4+ bevat hiervoor grid-cols-subgrid. Subgrid is handig om labels van formulieren uit te lijnen binnen kaartcomponenten die in een bovenliggend raster staan. De interne elementen van elke kaart worden dan uitgelijnd met de algemene rasterlijnen.

De hulpprogramma's gap-* voegen consistente tussenruimte toe tussen rastercellen. Gebruik gap-4 voor gelijke tussenruimte in beide richtingen, gap-x-4 voor alleen horizontale tussenruimte en gap-y-6 voor alleen verticale tussenruimte. In tegenstelling tot marges voegt gap geen extra ruimte toe aan de buitenranden van het raster, waardoor je indeling netjes en voorspelbaar blijft.

In de meeste indelingen uit de praktijk wil je minder kolommen op kleine schermen en meer op grotere schermen. Met de responsieve voorvoegsels van Tailwind is dat eenvoudig: grid-cols-1 md:grid-cols-2 lg:grid-cols-4 stapelt elementen op mobiele apparaten, toont twee kolommen op tablets en vier op desktops. Deze mobile-first aanpak betekent dat de klasse zonder voorvoegsel de basis vormt en dat klassen met een voorvoegsel deze op grotere breekpunten overschrijven.

De sleutelwoorden auto-fill en auto-fit van CSS Grid maken op basis van de beschikbare ruimte dynamisch een aantal kolommen aan. Met de syntaxis voor willekeurige waarden van Tailwind kun je grid-cols-[repeat(auto-fill,minmax(200px,1fr))] schrijven om automatisch kolommen toe te voegen wanneer daar ruimte voor is. auto-fill behoudt lege sporen, terwijl auto-fit deze samenvouwt. Beide maken echt vloeiende rasters mogelijk zonder mediaquery's.

Hier zie je alles samengebracht in een echt patroon voor een sectie met functies, zoals je die op marketingpagina's gebruikt. Elke kaart met een functie heeft een pictogram, kop en beschrijving. Het raster gebruikt grid-cols-1 sm:grid-cols-3, zodat de kaarten op mobiele apparaten worden gestapeld en op grotere schermen over drie kolommen worden verdeeld. Consistente opvulling en een subtiele achtergrond zorgen voor visuele scheiding zonder randen.

In deze les heb je geleerd dat de grid-klasse een CSS Grid-container activeert, dat grid-cols-1 tot en met grid-cols-12 kolomsporen met dezelfde breedte definiëren en dat responsieve voorvoegsels zoals md:grid-cols-3 het aantal kolommen op breekpunten wijzigen. Hierna bekijken we hoe je rasteritems meerdere kolommen en rijen kunt laten beslaan voor complexe indelingen.