Ang post na ito ay nagpapaliwanag sa kumpletong pamamaraan upang magdagdag ng agwat sa pagitan ng mga column sa Tailwind.
Paano Magdagdag ng Gap sa Pagitan ng Mga Column sa Tailwind?
Upang magdagdag ng agwat sa pagitan ng mga column sa Tailwind, gamitin ang built-in na “ gap-{size} ' kagamitan. Tinutukoy nito ang isang integer na halaga na kumakatawan sa agwat sa pagitan ng mga column nang pahalang at patayo. Gawin natin ang gawaing ito nang praktikal sa tulong ng mga nakasaad na halimbawa.
Istruktura ng File ng Proyekto
Ang ' gap-{size} ” utility ay maaaring ipatupad sa alinman sa mga proyekto ng Tailwind na sumusunod sa ibinigay na istraktura ng file:
Magsimula tayo sa unang halimbawa.
Halimbawa 1: Gamitin ang Utility na “gap-{size}” para Idagdag ang Parehong Gap sa Pagitan ng Mga Rows at Column
Inilalapat ng halimbawang ito ang utility na 'gap-{size}' upang magdagdag ng parehong gap nang pahalang at patayo sa pagitan ng mga ibinigay na column.
HTML Code
Pangkalahatang-ideya ng sumusunod na code:
< ulo >
< link href = '/dist/output.css' rel = 'stylesheet' >
< / ulo >
< katawan >
< h1 klase = 'text-3xl font-bold text-center underline text-orange-600' > Maligayang pagdating sa Linuxhint! < / h1 >< br >
< div klase = 'mx-2 grid grid-cols-3 gap-4' >
< div klase = 'border-2 border-orange-600' > Unang Tutorial < / div >
< div klase = 'border-2 border-orange-600' > Pangalawang Tutorial < / div >
< div klase = 'border-2 border-orange-600' > Pangatlong Tutorial < / div >
< div klase = 'border-2 border-orange-600' > Ikaapat na Tutorial < / div >
< div klase = 'border-2 border-orange-600' > Ikalimang Tutorial < / div >
< div klase = 'border-2 border-orange-600' > Ika-anim na Tutorial < / div >
< div klase = 'border-2 border-orange-600' > Ikapitong Tutorial < / div >
< div klase = 'border-2 border-orange-600' > Ikawalong Tutorial < / div >
< / div >
Sa mga linya ng code sa itaas:
- Una, i-link ang pangunahing CSS file ' /dist/output.css ' kasama ang umiiral na HTML file ' index.html ' gamit ang ' ” tag sa seksyong “ulo”.
- Susunod, ang seksyong “katawan” ay lumilikha ng elementong “
” na gumagamit ng “ Laki ng Font ”, “ Timbang ng Font ”, “ I-align ang Teksto ”, “ Dekorasyon ng Teksto ', at ang ' Kulay ng teksto ” Mga klase sa Tailwind, ayon sa pagkakabanggit.
- Pagkatapos nito, may idinagdag na elementong “” na nalalapat sa “ grid ' utility upang itakda ang nilalaman nito sa nakasaad na bilang ng mga layout ng grid, ang ' margin ” class upang itakda ang pahalang na margin, at ang “ gap ” utility upang idagdag ang tinukoy na agwat sa pagitan ng mga column.
- Sa seksyong '
' na katawan ng elemento, karagdagang walong '' na elemento ang kasama na gumagamit ng ' Lapad ng Border ' at ang ' Kulay ng Border ” klase, ayon sa pagkakabanggit.Output
Patakbuhin ang HTML code sa itaas sa live na server at suriin ang output:
Gaya ng nakikita, idinaragdag ng output ang tinukoy na agwat sa pagitan ng mga column sa parehong mga sukat nang naaangkop.
Halimbawa 2: Gamitin ang Utility na “gap-{size}” para Magdagdag ng Gap sa Pagitan ng Mga Hanay at Column nang Malayang
Ang ' gap-{size} Ang ' utility ay maaari ding ipatupad na may 'x(horizontal)' at 'y(vertical)' na mga dimensyon bilang 'gap-x-{size}' para sa mga row, at ang 'gap-y-{size}' para sa mga column para idagdag ang agwat sa pagitan nila nang paisa-isa.Tingnan natin ang praktikal na pagpapatupad nito.
HTML Code
< ulo >
Tingnan ang ibinigay na code:
< link href = '/dist/output.css' rel = 'stylesheet' >
< / ulo >
< katawan >
< div klase = 'mx-2 grid grid-cols-4 gap-x-4 gap-y-6' >
< div klase = 'border-2 border-orange-600' >Unang Tutorial< / div >
< div klase = 'border-2 border-orange-600' >Ikalawang Tutorial< / div >
< div klase = 'border-2 border-orange-600' >Ikatlong Tutorial< / div >
< div klase = 'border-2 border-orange-600' >Ikaapat na Tutorial< / div >
< div klase = 'border-2 border-orange-600' >Ikalimang Tutorial< / div >
< div klase = 'border-2 border-orange-600' >Ika-anim na Tutorial< / div >
< div klase = 'border-2 border-orange-600' >Ikapitong Tutorial< / div >
< div klase = 'border-2 border-orange-600' >Ikawalong Tutorial< / div >
< / div >
< katawan >Dito, ang ' gap-x-{laki} 'Ang utility ay nagdaragdag ng puwang sa pagitan ng mga hilera at ng ' gap-y-{size} ” idinaragdag ang tinukoy na agwat sa pagitan ng mga column nang nakapag-iisa.
Output
Ang kinalabasan sa itaas ay nagpapatunay na ang agwat sa pagitan ng mga row at column ay inilapat nang naaayon.
Konklusyon
Nagbibigay ang “Tailwind CSS” ng built-in na “ gap-{size} ” utility para idagdag ang gap sa pagitan ng mga column. Maaari rin itong gamitin upang idagdag ang agwat sa pagitan ng mga hilera at hanay nang hiwalay sa pamamagitan ng “ gap-x-{laki} ' at ang ' gap-y-{size} ” mga kagamitan. Ang post na ito ay nagbigay ng kumpletong pamamaraan upang magdagdag ng agwat sa pagitan ng mga column sa Tailwind.
- Sa seksyong '