Ovaj post razrađuje cijeli postupak za dodavanje razmaka između stupaca u Tailwindu.
Kako dodati razmak između stupaca u Tailwindu?
Da biste dodali razmak između stupaca u Tailwindu, koristite ugrađeni ' razmak-{veličina} ' korisnost. Određuje cjelobrojnu vrijednost koja predstavlja razmak između vodoravnih i okomitih stupaca. Odradimo ovaj zadatak praktično uz pomoć navedenih primjera.
Struktura datoteke projekta
' razmak-{veličina} ” uslužni program može se implementirati u bilo koji od Tailwind projekata koji slijede zadanu strukturu datoteke:
Počnimo s prvim primjerom.
Primjer 1: Koristite pomoćni program “gap-{size}” za dodavanje istog razmaka između redaka i stupaca
Ovaj primjer primjenjuje uslužni program 'gap-{size}' za dodavanje istog razmaka vodoravno i okomito između zadanih stupaca.
HTML kôd
Pregled sljedećeg koda:
< glava >
< veza href = '/dist/output.css' rel = 'list stilova' >
< / glava >
< tijelo >
< h1 razreda = 'text-3xl font-bold text-center underline text-orange-600' > Dobrodošli u Linuxhint! < / h1 >< br >
< div razreda = 'mx-2 grid grid-cols-3 gap-4' >
< div razreda = 'border-2 border-orange-600' > Prvi vodič < / div >
< div razreda = 'border-2 border-orange-600' > Drugi vodič < / div >
< div razreda = 'border-2 border-orange-600' > Treći vodič < / div >
< div razreda = 'border-2 border-orange-600' > Četvrti vodič < / div >
< div razreda = 'border-2 border-orange-600' > Peti vodič < / div >
< div razreda = 'border-2 border-orange-600' > Šesti vodič < / div >
< div razreda = 'border-2 border-orange-600' > Sedmi vodič < / div >
< div razreda = 'border-2 border-orange-600' > Osmi vodič < / div >
< / div >
U gornjim linijama koda:
- Prvo povežite glavnu CSS datoteku ' /dist/output.css ' s postojećom HTML datotekom ' index.html ' koristiti ' ” u odjeljku „glava”.
- Zatim odjeljak “body” stvara element “
” koji koristi “ Veličina fonta ”, “ Težina fonta ”, “ Poravnanje teksta ”, “ Dekoracija teksta ', i ' Boja teksta ” Klase leđnog vjetra, odnosno.
- Nakon toga se dodaje element “” koji primjenjuje “ rešetka ” uslužni program za postavljanje njegovog sadržaja u navedeni broj rasporeda mreže, “ margina ' za postavljanje vodoravne margine i ' praznina ” uslužni program za dodavanje navedenog razmaka između stupaca.
- U odjeljku tijela elementa “
” uključeno je dodatnih osam elemenata “” koji koriste “ Širina obruba ' i ' Boja obruba ” klase, odnosno.Izlaz
Pokrenite gornji HTML kod na poslužitelju uživo i analizirajte izlaz:
Kao što se vidi, izlaz dodaje navedeni razmak između stupaca u obje dimenzije na odgovarajući način.
Primjer 2: Koristite pomoćni program “gap-{size}” za dodavanje razmaka između redaka i stupaca neovisno
' razmak-{veličina} ” uslužni program također se može implementirati s dimenzijama „x(horizontalno)” i „y(vertikalno)” kao „gap-x-{size}” za retke i „gap-y-{size}” za stupce za dodavanje jaz između njih pojedinačno.Pogledajmo njegovu praktičnu primjenu.
HTML kôd
< glava >
Pogledajte navedeni kod:
< veza href = '/dist/output.css' rel = 'list stilova' >
< / glava >
< tijelo >
< div razreda = 'mx-2 grid grid-cols-4 gap-x-4 gap-y-6' >
< div razreda = 'border-2 border-orange-600' >Prvi vodič< / div >
< div razreda = 'border-2 border-orange-600' >Drugi vodič< / div >
< div razreda = 'border-2 border-orange-600' >Treći vodič< / div >
< div razreda = 'border-2 border-orange-600' >Četvrti vodič< / div >
< div razreda = 'border-2 border-orange-600' >Peti vodič< / div >
< div razreda = 'border-2 border-orange-600' >Šesti vodič< / div >
< div razreda = 'border-2 border-orange-600' >Sedmi vodič< / div >
< div razreda = 'border-2 border-orange-600' >Osmi vodič< / div >
< / div >
< tijelo >Ovdje, ' razmak-x-{veličina} ” uslužni program dodaje razmak između redaka i razmak-y-{veličina} ” neovisno dodaje navedeni razmak između stupaca.
Izlaz
Gore navedeni ishod potvrđuje da se razmak između redaka i stupaca primjenjuje u skladu s tim.
Zaključak
“Tailwind CSS” pruža ugrađeni “ razmak-{veličina} ” uslužni program za dodavanje razmaka između stupaca. Također se može koristiti za odvojeno dodavanje razmaka između redaka i stupaca putem ' razmak-x-{veličina} ' i ' razmak-y-{veličina} ” komunalije. Ovaj post pruža potpuni postupak za dodavanje razmaka između stupaca u Tailwindu.
- U odjeljku tijela elementa “