Een andere manier om website-inhoud te organiseren is via grids. Tailwind CSS biedt krachtige utilities voor het maken van grid-layouts. Dit hoofdstuk legt uit hoe je met Tailwind CSS grid-utilities gridcontainers en items opzet.

Gridcontainer

Gebruik de grid-klasse om een gridcontainer te definiëren. Je kunt het aantal kolommen, de afstanden tussen rijen en kolommen en meer instellen.

Uitleg

1. grid: Stelt de weergave van het element in op grid;
2. grid-cols-3: Definieert een grid met drie kolommen;
3. gap-4: Voegt een tussenruimte van 1rem (16px) toe tussen grid-items.

Grid met rijen

grid-rows-2: Definieert een grid met twee rijen.

Kolom- en rijgroottes beheren

De groottes van kolommen en rijen kunnen worden beheerd met de klassen grid-cols-{n} en grid-rows-{n}, waarbij {n} het aantal kolommen of rijen aangeeft. Ook fractionele eenheden (fr), percentages en andere maatvoeringseenheden zijn mogelijk.

Uitleg

1. col-span-2: Laat het element over twee kolommen lopen;
2. col-span-3: Laat het element over alle drie de kolommen lopen.

Vaste en flexibele afmetingen

Uitleg

1. w-1/2: Stelt de breedte van het element in op 50% van de container;
2. w-full: Stelt de breedte van het element in op 100% van de container;
3. w-1/3: Stelt de breedte van het element in op 33,33% van de container.

Grid-sjabloonkolommen en -rijen

Specifieke utility-klassen gebruiken om het aantal en de breedte van kolommen en rijen in het grid-layout te definiëren.

Aangepaste grid-kolommen

Uitleg

1. grid-cols-4: Definieert een raster met vier kolommen;
2. col-span-1: Laat het element over één kolom lopen;
3. col-span-2: Laat het element over twee kolommen lopen.

Aangepaste Grid-rijen

Uitleg

1. grid-rows-3: Definieert een grid met drie rijen;
2. row-span-2: Laat het element over twee rijen spreiden;
3. row-span-1: Laat het element over één rij spreiden.

Opmerking

Raadpleeg de officiële documentatie voor meer informatie over de Tailwind CSS Grid.