Tailwind CSS pakub ruudustikusüsteemi, mis võimaldab kasutajatel jagada veebilehte veergudeks ja ridadeks, kasutades utiliite grid-cols ja grid-rows. See pakub ka ruudustiku veeru algus- ja lõpuutiliite, et juhtida elementide suurust ja paigutust ruudustiku veergude vahel. Need utiliidid võimaldavad kasutajatel määrata elemendi algus- ja lõppasendi ruudustiku paigutuses.
See artikkel selgitab meetodit, kuidas panna veerud Tailwind CSS-is algama või lõpetama konkreetse n-nda ruudustiku real.
Kuidas panna veerud Tailwindis algama või lõppema n-nda võrgujoone juures?
Kui soovite, et veerud algaksid või lõppeksid Tailwindis n-nda ruudustiku real, kasutage col-start-
1. samm: määrake HTML-programmis ruudustiku elementide algus- ja lõppasendid
Looge HTML-programm ja kasutage ' col-start-
< keha >
< h1 klass = 'tekst-2xl tekstikeskus' >
Tailwind CSS – veeru algus / Lõpp
h1 >
< div klass = 'grid grid-cols-4 gap-3 m-3' >
< div klass = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 div >
< div klass = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 div >
< div klass = 'col-start-3 col-end-5 bg-teal-500 p-5' > 3 div >
< div klass = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 div >
< div klass = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 div >
div >
keha >
Siin, emaelemendis
- “ võre ” kasutatakse ruudustikupaigutuse loomiseks.
- “ grid-cols-4 ” klass täpsustab, et ruudustikus peaks olema 4 võrdse suurusega veergu.
- “ vahe-3 ” klass määrab iga ruudustiku elemendi vahele 3 ühikut.
- “ m-3 ” klass lisab võrgukonteineri ümber 3 ühiku suuruse varu.
Sisemistes alamelementides
- “ col-start-2 ” atribuut määrab, et ruudustiku üksus algab veerust 2.
- “ col-span-2 ” näitab, et ruudustiku üksus hõlmab 2 veergu.
- “ col-start-1 ” kasutatakse ruudustiku elemendi alustamiseks 1. veerust.
- “ col-end-3 ” täpsustab, et ruudustiku üksus lõpeb veeruga 3.
- “ col-start-3 ” näitab, et ruudustiku üksus algab teisest veerust.
- “ col-end-5 ” atribuut lõpetab ruudustiku üksuse veerus 5.
- “ col-span-3 ” täpsustab, et ruudustiku üksus hõlmab 3 veergu.
- “ bg-teal-500 ” määrab sinakaspruuni värvi kõigi ruudustikuelementide taustale.
- “ p-5 ” lisab ruudustiku üksuste sees olevale sisule 5-ühikulise polsterduse.
2. samm: kontrollige väljundit
Veendumaks, et ruudustiku veeru algus- ja lõppasendid on rakendatud, vaadake HTML-i veebilehte:
Ülaltoodud väljund näitab, et ruudustiku veeru algus- ja lõppasendid on edukalt rakendatud, mille järgi need määrati.
Järeldus
Kui soovite, et veerud algaksid või lõppeksid Tailwindis n-nda ruudustiku real, col-start-