Nag-aalok ang Tailwind CSS ng grid system na nagbibigay-daan sa mga user na hatiin ang web page sa mga column at row gamit ang grid-cols at grid-rows utility. Nagbibigay din ito ng mga utility sa pagsisimula at pagtatapos ng grid column upang kontrolin ang laki at paglalagay ng mga elemento sa mga column ng grid. Binibigyang-daan ng mga utility na ito ang mga user na tukuyin ang panimulang posisyon at pagtatapos ng isang elemento sa loob ng layout ng grid.
Ipapaliwanag ng artikulong ito ang paraan upang simulan o tapusin ang mga column sa partikular na nth grid line sa Tailwind CSS.
Paano Magsisimula o Magtatapos ang Mga Column sa ika-1 Grid Line sa Tailwind?
Upang simulan o tapusin ang mga column sa ika-n na linya ng grid sa Tailwind, gamitin ang ' col-start-
Hakbang 1: Tukuyin ang Panimulang at Pangwakas na mga Posisyon ng Mga Elemento ng Grid sa HTML Program
Gumawa ng HTML program at gamitin ang “ col-start-
< katawan >
< h1 klase = 'text-2xl text-center' >
Tailwind CSS - Pagsisimula ng Column / Tapusin
h1 >
< div klase = 'grid grid-cols-4 gap-3 m-3' >
< div klase = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 div >
< div klase = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 div >
< div klase = 'col-start-3 col-end-5 bg-teal-500 p-5' > 3 div >
< div klase = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 div >
< div klase = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 div >
div >
katawan >
Dito, sa parent
- “ grid ” ay ginagamit upang lumikha ng layout ng grid.
- “ grid-cols-4 Tinutukoy ng klase na ang grid ay dapat magkaroon ng 4 na magkaparehong laki ng mga column.
- “ gap-3 ” Ang klase ay nagtatakda ng spacing ng 3 unit sa pagitan ng bawat grid item.
- “ m-3 ” class ay nagdaragdag ng margin na 3 unit sa paligid ng grid container.
Sa mga elemento ng inner child
- “ col-start-2 Tinutukoy ng ” property na ang grid item ay magsisimula sa column 2.
- “ col-span-2 ” ay nagpapahiwatig na ang grid item ay sumasakop sa 2 column.
- “ col-start-1 ” ay ginagamit upang simulan ang grid item mula sa column 1.
- “ col-end-3 ” ay tumutukoy na ang grid item ay nagtatapos sa column 3.
- “ col-start-3 ” ay nagpapahiwatig na ang grid item ay nagsisimula sa pangalawang column.
- “ col-end-5 Tinatapos ng property ng ” ang grid item sa column 5.
- “ col-span-3 ” ay tumutukoy na ang grid item ay sumasakop sa 3 column.
- “ bg-teal-500 ” itinatakda ang kulay ng teal sa background ng lahat ng grid item.
- “ p-5 ” nagdaragdag ng padding ng 5 unit sa content sa loob ng grid item.
Hakbang 2: I-verify ang Output
Upang matiyak na nailapat ang mga posisyon sa pagsisimula at pagtatapos ng column ng grid, tingnan ang HTML web page:
Ang output sa itaas ay nagpapahiwatig na ang grid column na panimulang at pagtatapos na mga posisyon ay matagumpay na nailapat ayon sa kung saan sila ay tinukoy.
Konklusyon
Upang simulan o tapusin ang mga column sa ika-n na linya ng grid sa Tailwind, ang ' col-start-