Tailwind CSS ponuja mrežni sistem, ki uporabnikom omogoča razdelitev spletne strani v stolpce in vrstice z uporabo pripomočkov grid-cols in grid-rows. Zagotavlja tudi pripomočke za začetek in konec stolpca mreže za nadzor velikosti in postavitve elementov v stolpcih mreže. Ti pripomočki omogočajo uporabnikom, da določijo začetni in končni položaj elementa znotraj postavitve mreže.
Ta članek bo razložil metodo za začetek ali konec stolpcev na določeni n-ti mrežni črti v Tailwind CSS.
Kako narediti, da se stolpci začnejo ali končajo na n-ti mrežni črti v Tailwindu?
Če želite, da se stolpci začnejo ali končajo na n-ti mrežni črti v Tailwindu, uporabite » col-start-
1. korak: Določite začetni in končni položaj elementov mreže v programu HTML
Naredite program HTML in uporabite » col-start-
< telo >
< h1 razred = 'text-2xl center za besedilo' >
Tailwind CSS - Začetek stolpca / Konec
h1 >
< div razred = 'grid grid-cols-4 gap-3 m-3' >
< div razred = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 div >
< div razred = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 div >
< div razred = 'col-start-3 col-end-5 bg-teal-500 p-5' > 3 div >
< div razred = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 div >
< div razred = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 div >
div >
telo >
Tukaj, v nadrejenem elementu
- “ mreža ” se uporablja za ustvarjanje mrežne postavitve.
- “ grid-cols-4 ” določa, da mora imeti mreža 4 enako velike stolpce.
- “ vrzel-3 ” nastavi razmik 3 enot med vsakim elementom mreže.
- “ m-3 ” doda rob 3 enot okoli vsebnika mreže.
V notranjih podrejenih elementih
- “ col-start-2 ” lastnost določa, da se postavka mreže začne pri stolpcu 2.
- “ col-span-2 ” pomeni, da postavka mreže zavzema 2 stolpca.
- “ col-start-1 ” se uporablja za začetek postavke mreže iz stolpca 1.
- “ col-end-3 ” določa, da se postavka mreže konča pri stolpcu 3.
- “ col-start-3 ” označuje, da se postavka mreže začne v drugem stolpcu.
- “ col-end-5 Lastnost ” konča postavko mreže v stolpcu 5.
- “ col-span-3 ” določa, da postavka mreže zaseda 3 stolpce.
- “ bg-teal-500 ” nastavi modrozeleno barvo za ozadje vseh elementov mreže.
- “ p-5 ” vsebini znotraj elementov mreže doda oblazinjenje 5 enot.
2. korak: Preverite izhod
Če želite zagotoviti, da sta uporabljena začetni in končni položaj stolpca mreže, si oglejte spletno stran HTML:
Zgornji izhod kaže, da sta bila začetna in končna pozicija stolpca mreže uspešno uporabljena glede na to, kar sta bila podana.
Zaključek
Če želite, da se stolpci začnejo ali končajo na n-ti mrežni črti v Tailwindu, je ' col-start-