En anden måde at organisere webstedsindhold på er gennem grids. Tailwind CSS tilbyder kraftfulde værktøjer til at oprette grid-layouts. Dette kapitel forklarer, hvordan du bruger Tailwind CSS grid utilities til at etablere grid-containere og elementer.

Grid-container

For at definere en grid-container bruges klassen grid. Du kan styre antallet af kolonner, afstanden mellem rækker og kolonner og mere.

Forklaring

1. grid: Angiver elementets display til grid;
2. grid-cols-3: Definerer et grid med tre kolonner;
3. gap-4: Tilføjer et mellemrum på 1rem (16px) mellem grid-elementer.

Grid med rækker

grid-rows-2: Definerer et grid med to rækker.

Kontrol af kolonne- og rækkestørrelser

Størrelser på kolonner og rækker kan kontrolleres ved hjælp af klasserne grid-cols-{n} og grid-rows-{n}, hvor {n} angiver antallet af kolonner eller rækker. Det er også muligt at anvende brøkenheder (fr), procenter og andre størrelsesenheder.

Forklaring

1. col-span-2: Strækker elementet over to kolonner;
2. col-span-3: Strækker elementet over alle tre kolonner.

Faste og fleksible størrelser

Forklaring

1. w-1/2: Angiver elementets bredde til 50% af dets container;
2. w-full: Angiver elementets bredde til 100% af dets container;
3. w-1/3: Angiver elementets bredde til 33,33% af dets container.

Gitterkolonner og -rækker

Specifikke hjælpeklasser kan bruges til at definere antal og bredde på kolonner og rækker i dit gitterlayout.

Tilpassede gitterkolonner

Forklaring

1. grid-cols-4: Definerer et grid med fire kolonner;
2. col-span-1: Strækker elementet over én kolonne;
3. col-span-2: Strækker elementet over to kolonner.

Tilpassede gitterrækker

Forklaring

1. grid-rows-3: Definerer et grid med tre rækker;
2. row-span-2: Strækker elementet over to rækker;
3. row-span-1: Strækker elementet over én række.

Bemærk

Se venligst den officielle dokumentation for mere information om Tailwind CSS Grid.