Toinen tapa järjestää verkkosivuston sisältöä on käyttää ruudukoita. Tailwind CSS tarjoaa tehokkaita apuluokkia ruudukkoasettelujen luomiseen. Tässä luvussa käsitellään, kuinka Tailwind CSS:n grid-apuluokkia käytetään ruudukkosäiliöiden ja -elementtien määrittämiseen.

Ruudukkosäiliö

Määritä ruudukkosäiliö käyttämällä grid-luokkaa. Voit hallita sarakkeiden määrää, rivien ja sarakkeiden välejä sekä muita ominaisuuksia.

Selitys

1. grid: Asettaa elementin näytön gridiksi;
2. grid-cols-3: Määrittää ruudukon, jossa on kolme saraketta;
3. gap-4: Lisää 1 rem (16px) välin ruudukon solujen väliin.

Ruudukko riveillä

grid-rows-2: Määrittää ruudukon, jossa on kaksi riviä.

Sarakkeiden ja rivien kokojen hallinta

Sarakkeiden ja rivien kokoja voi hallita luokilla grid-cols-{n} ja grid-rows-{n}, missä {n} tarkoittaa sarakkeiden tai rivien määrää. Voit käyttää myös murto-osayksiköitä (fr), prosentteja ja muita kokoyksiköitä.

Selitys

1. col-span-2: Elementti ulottuu kahden sarakkeen yli;
2. col-span-3: Elementti ulottuu kaikkien kolmen sarakkeen yli.

Kiinteät ja joustavat koot

Selitys

1. w-1/2: Asettaa elementin leveydeksi 50 % sen säiliöstä;
2. w-full: Asettaa elementin leveydeksi 100 % sen säiliöstä;
3. w-1/3: Asettaa elementin leveydeksi 33,33 % sen säiliöstä.

Ruudukon sarakkeet ja rivit

Voit käyttää erityisiä apuluokkia määrittääksesi ruudukon sarakkeiden ja rivien määrän sekä leveyden.

Mukautetut ruudukon sarakkeet

Selitys

1. grid-cols-4: Määrittää ruudukon, jossa on neljä saraketta;
2. col-span-1: Ulottuu yhden sarakkeen yli;
3. col-span-2: Ulottuu kahden sarakkeen yli.

Mukautetut ruuturivit

Selitys

1. grid-rows-3: Määrittää ruudukon, jossa on kolme riviä;
2. row-span-2: Ulottuu kahden rivin yli;
3. row-span-1: Ulottuu yhden rivin yli.

Huomio

Lisätietoja Tailwind CSS Gridistä löytyy virallisesta dokumentaatiosta.