V Tailwind CSS razpon vrstic poskrbi, da element zasede dve ali več vrstic znotraj mreže. Uporablja se za določitev števila vrstic, ki jih mora element zasesti/razpon. Uporabnikom omogoča prilagajanje velikosti in položaja mrežnega elementa v več vrsticah ter ustvarjanje različnih postavitev. Poleg tega se lahko uporablja za ustvarjanje prilagodljivih in odzivnih mrežnih postavitev za spletne strani.
Ta zapis bo ponazoril metodo za ustvarjanje razpona vrstic v Tailwind CSS.
Kako narediti razpon vrstic v zadnjem vetru?
Če želite, da se vrstice v Tailwindu raztezajo, naredite program HTML. Nato uporabite » row-span-
Za praktično izvedbo si oglejte navedene korake:
1. korak: Naredite Column Span v programu HTML
Ustvarite program HTML in uporabite » row-span-
< telo >
< div razred = 'grid grid-rows-4 grid-flow-col gap-3 m-3 text-center' >
< div razred = 'row-span-3 bg-teal-500 p-5' > 1 < / div >
< div razred = 'bg-teal-500 p-5' > 2 < / div >
< div razred = 'row-span-2 bg-teal-500 p-5' > 3 < / div >
< div razred = 'bg-teal-500 p-5' > 4 < / div >
< div razred = 'bg-teal-500 p-5' > 5 < / div >
< div razred = 'row-span-4 bg-teal-500 p-5' > 6 < / div >
< / div >
< / telo >
Tukaj, v nadrejenem elementu
- “ mreža ” se uporablja za ustvarjanje mrežne postavitve.
- “ mreža-vrstica-4 ” nastavi število vrstic v mreži na 4.
- “ grid-flow-col ” postavlja elemente mreže vodoravno v stolpce.
- “ vrzel-3 ” nastavi razmik 3 enot med vsakim elementom mreže.
- “ m-3 ” uporabi rob 3 enot okoli vsebnika mreže.
- “ besedilno središče ” nastavi besedilo vsakega elementa mreže na sredino.
V podrejenih elementih
- “ razpon vrstic-3 ” določa, da se mora element raztezati čez 3 vrstice v mreži.
- “ razpon vrstic-2 ” označuje, da mora element obsegati 2 vrstici v mreži.
- “ razpon vrstic-4 ” določa, da mora element zajemati 4 vrstice v mreži.
- “ bg-teal-500 ” nastavi modrozeleno barvo za ozadje elementa mreže.
- “ p-5 ” doda oblazinjenje 5 enot vsebini znotraj podrejenih elementov .
2. korak: Preverite izhod
Oglejte si spletno stran HTML, da preverite, ali je bil razpon vrstic uporabljen ali ne:
V zgornjem izhodu je mogoče opaziti, da je bil razpon vrstic uspešno uporabljen, v skladu s katerim je bil določen.
Zaključek
Če želite, da se vrstice raztezajo v Tailwindu, uporabite » row-span-
” v programu HTML in določite število vrstic, ki jih mora zajemati vsak element. Za preverjanje si oglejte spremembe na spletni strani HTML. Ta zapis je ponazoril metodo za ustvarjanje razpona vrstic v Tailwind CSS.