Tämä artikkeli on esimerkki menetelmästä, jolla keskeytyskohtia ja mediakyselyjä käytetään riviruudukossa Tailwind CSS:ssä.
Kuinka käyttää keskeytyspisteitä ja mediakyselyjä riviruudukossa Tailwindissä?
Jos haluat käyttää keskeytyskohtia ja mediakyselyjä Tailwindin riviruudukossa, tee HTML-ohjelma. Määritä sitten rivien määrä eri näyttökokoille käyttämällä ' sm ”, “ md ' tai ' lg 'katkospisteet ' grid-rows-
Katsotaanpa käytännön toteutusta:
Vaihe 1: Käytä keskeytyspisteitä ja mediakyselyitä riviruudukon kanssa HTML-ohjelmassa
Luo HTML-ohjelma ja määritä rivien määrä eri näyttökokoille ' grid-rows-
< kehon >
< div luokkaa = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div luokkaa = 'bg-teal-500 p-5' > 1 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 2 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 3 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 4 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 5 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 6 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 7 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 8 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 9 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / kehon >
Tässä:
- ' ruudukko ” -luokkaa käytetään ruudukkoasettelun luomiseen.
- ' ruudukko-rivit-2 ” luokka määrittelee, että ruudukossa tulee olla 2 samankokoista riviä.
- ' md:grid-rows-3 ” luokka muuttaa ruudukon 3 samankokoiseksi riviksi keskikokoisella näytöllä.
- ' lg:grid-rows-5 ” luokka muuttaa ruudukon 5 samankokoiseksi riviksi suurella näytöllä.
- ' grid-flow-col ” luokka sijoittaa ruudukon kohteet vaakasuoraan sarakkeisiin.
- ' väli-3 ” luokka asettaa 3 yksikön välin kunkin ruudukon kohteen väliin.
- ' m-3 ” luokka soveltaa 3 yksikön marginaalia ruudukkosäiliön ympärille.
- ' tekstikeskus ”-luokka asettaa jokaisen ruudukon tekstin keskelle.
- ' bg-teal-500 ” luokka asettaa sinivihreän värin ruudukkokohteiden taustalle.
- ' p-5 ” luokka lisää 5 yksikön täytteen lapsen sisällä olevaan sisältöön
kohteita.
Vaihe 2: Tarkista lähtö
Varmistaaksesi, että keskeytyskohdat ja mediakyselyt on otettu käyttöön riviruudukossa, tarkastele HTML-verkkosivua muuttamalla näytön kokoa:
Yllä olevasta lähdöstä voidaan nähdä, että rivien lukumäärä muuttuu näytön koon mukaan. Tämä osoittaa, että keskeytyskohdat ja mediakyselyt on otettu käyttöön riviruudukossa onnistuneesti.
Johtopäätös
Jos haluat käyttää keskeytyskohtia ja mediakyselyjä Tailwindin riviruudukossa, määritä rivien määrä eri näyttökokoille käyttämällä ' sm ”, “ md ' tai ' lg 'katkospisteet ' grid-rows-
”apuohjelmat. Varmista sitten muutokset verkkosivulla muuttamalla näytön kokoa. Tämä artikkeli on esimerkki menetelmästä, jolla keskeytyskohtia ja mediakyselyjä käytetään riviruudukossa Tailwind CSS:ssä.