Tailwind CSS:ssä riviväli saa elementin varaamaan kaksi tai useampia riviä ruudukossa. Sitä käytetään määrittämään rivien lukumäärä, jonka elementin tulee varata/väli. Sen avulla käyttäjät voivat säätää ruudukon kokoa ja sijaintia useilla riveillä ja luoda erilaisia asetteluja. Lisäksi sitä voidaan käyttää luomaan joustavia ja reagoivia ruudukkoasetteluja verkkosivuille.
Tämä kirjoitus on esimerkki menetelmästä tehdä riviväli Tailwind CSS:ssä.
Kuinka tehdä riviväliä myötätuulessa?
Jos haluat saada rivit ulottumaan Tailwindissä, tee HTML-ohjelma. Käytä sitten ' riviväli-
Käytännön toteutusta varten tutustu annettuihin vaiheisiin:
Vaihe 1: Tee sarakeväli HTML-ohjelmassa
Luo HTML-ohjelma ja käytä ' riviväli-
< kehon >
< div luokkaa = 'grid grid-rows-4 grid-flow-col gap-3 m-3 text-center' >
< div luokkaa = 'row-span-3 bg-teal-500 p-5' > 1 < / div >
< div luokkaa = 'bg-teal-500 p-5' > 2 < / div >
< div luokkaa = 'row-span-2 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 = 'row-span-4 bg-teal-500 p-5' > 6 < / div >
< / div >
< / kehon >
Tässä ylätason
- ' ruudukko ” -luokkaa käytetään ruudukkoasettelun luomiseen.
- ' ruudukko-rivi-4 ” luokka asettaa ruudukon rivien numeroksi 4.
- ' 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.
Alatason
- ' riviväli-3 ” luokka määrittää, että elementin tulee ulottua ruudukon 3 rivin yli.
- ' riviväli-2 ”-luokka osoittaa, että elementin tulee ulottua ruudukon 2 rivin yli.
- ' riviväli-4 ” luokka määrittää, että elementin tulee ulottua ruudukon neljälle riville.
- ' bg-teal-500 ”-luokka asettaa sinivihreän värin ruudukon kohteen taustalle.
- ' p-5 ” luokka lisää 5 yksikön täytteen sisältöön -alakohteiden sisällä.
Vaihe 2: Tarkista lähtö
Tarkastele HTML-verkkosivua ja tarkista, onko riviväliä käytetty vai ei:
Yllä olevassa lähdössä voidaan havaita, että riviväliä on käytetty onnistuneesti, minkä mukaisesti se määritettiin.
Johtopäätös
Jos haluat saada rivit ulottumaan Tailwindissä, käytä ' riviväli-
”-apuohjelma HTML-ohjelmassa ja määritä rivien lukumäärä kunkin elementin tulisi ulottua. Tarkista muutokset HTML-verkkosivulta. Tämä kirjoitus on esimerkki menetelmästä tehdä riviväli Tailwind CSS:ssä.