En annen måte å organisere innholdet på et nettsted er ved hjelp av rutenett. Tailwind CSS tilbyr kraftige verktøy for å lage rutenettoppsett. Dette kapittelet forklarer hvordan du bruker Tailwind CSS sine grid-verktøy for å etablere grid-beholdere og elementer.

Grid-beholder

For å definere en grid-beholder, bruk klassen grid. Du kan kontrollere antall kolonner, avstanden mellom rader og kolonner, og mer.

Forklaring

1. grid: Setter elementets visning til grid;
2. grid-cols-3: Definerer et rutenett med tre kolonner;
3. gap-4: Legger til et mellomrom på 1rem (16px) mellom rutenett-elementene.

Rutenett med rader

grid-rows-2: Definerer et rutenett med to rader.

Kontroll av kolonne- og radhøyder

Størrelsen på kolonner og rader kan kontrolleres ved å bruke klassene grid-cols-{n} og grid-rows-{n}, der {n} angir antall kolonner eller rader. Det er også mulig å bruke brøkenheter (fr), prosent og andre størrelsesenheter.

Forklaring

1. col-span-2: Strekker elementet over to kolonner;
2. col-span-3: Strekker elementet over alle tre kolonnene.

Faste og fleksible størrelser

Forklaring

1. w-1/2: Angir bredden på elementet til 50 % av beholderen;
2. w-full: Angir bredden på elementet til 100 % av beholderen;
3. w-1/3: Angir bredden på elementet til 33,33 % av beholderen.

Rutenettmal for kolonner og rader

Du kan bruke spesifikke verktøyklasser for å definere antall og bredde på kolonner og rader i rutenettoppsettet ditt.

Tilpassede rutenettkolonner

Forklaring

1. grid-cols-4: Definerer et rutenett med fire kolonner;
2. col-span-1: Elementet strekker seg over én kolonne;
3. col-span-2: Elementet strekker seg over to kolonner.

Tilpassede rader i rutenett

Forklaring

1. grid-rows-3: Definerer et rutenett med tre rader;
2. row-span-2: Elementet strekker seg over to rader;
3. row-span-1: Elementet strekker seg over én rad.

Merk

Se offisiell dokumentasjon for mer informasjon om Tailwind CSS Grid.