Kako napraviti raspon redova u Tailwindu?

U Tailwind CSS-u, raspon redaka čini da element zauzima dva ili više redaka unutar mreže. Koristi se za definiranje broja redaka koje bi element trebao zauzimati/raspona. Korisnicima omogućuje prilagodbu veličine i položaja rešetke u više redaka i stvaranje različitih izgleda. Štoviše, može se koristiti za izradu fleksibilnih i responzivnih mrežnih izgleda za web stranice.

Ovaj zapis će ilustrirati metodu za stvaranje raspona redaka u Tailwind CSS-u.

Kako napraviti raspon redova u Tailwindu?

Kako bi se redovi proširili u Tailwindu, napravite HTML program. Zatim upotrijebite ' row-span- ” i definirajte broj redaka koji se protežu. Potrebno je definirati broj redaka koje svaki pojedini element treba obuhvatiti. Na kraju, pogledajte promjene na HTML web stranici radi provjere.

Za praktičnu provedbu pogledajte navedene korake:

Korak 1: Napravite raspon stupaca u HTML programu

Napravite HTML program i koristite ' row-span- ” pomoćne programe sa stavkama rešetke za izradu raspona stupaca. Na primjer, koristili smo ' row-span-3”, “row-span-2” i “row-span-4 ” uslužni programi kao u nastavku:

< tijelo >

< div razreda = 'grid grid-rows-4 grid-flow-col gap-3 m-3 text-center' >

< div razreda = 'row-span-3 bg-teal-500 p-5' > 1 < / div >
< div razreda = 'bg-teal-500 p-5' > 2 < / div >
< div razreda = 'row-span-2 bg-teal-500 p-5' > 3 < / div >
< div razreda = 'bg-teal-500 p-5' > 4 < / div >
< div razreda = 'bg-teal-500 p-5' > 5 < / div >
< div razreda = 'row-span-4 bg-teal-500 p-5' > 6 < / div >

< / div >

< / tijelo >

Ovdje, u nadređenom

elementu:

“ rešetka ” klasa se koristi za stvaranje rasporeda mreže.
“ rešetka-red-4 ” klasa postavlja broj redaka u mreži na 4.
“ grid-flow-col ” klasa postavlja rešetkaste stavke vodoravno u stupce.
“ praznina-3 ” klasa postavlja razmak od 3 jedinice između svake stavke mreže.
“ m-3 ” klasa primjenjuje marginu od 3 jedinice oko spremnika mreže.
“ tekst-centar ” klasa postavlja tekst svake stavke mreže u središte.

U podređenim

elementima:

“ raspon reda-3 ” klasa navodi da se element treba protezati kroz 3 retka u mreži.
“ raspon reda-2 ” klasa označava da bi se element trebao protezati kroz 2 retka u rešetki.
“ raspon reda-4 ” klasa navodi da se element treba protezati kroz 4 retka u rešetki.
“ bg-teal-500 ” klasa postavlja plavozelenu boju na pozadinu stavke mreže.
“ p-5 ” klasa dodaje ispunu od 5 jedinica sadržaju unutar podređenih
stavki.

Korak 2: Provjerite izlaz

Pogledajte HTML web-stranicu kako biste provjerili je li raspon retka primijenjen ili ne:

U gornjem izlazu može se uočiti da je raspon reda uspješno primijenjen prema kojem je naveden.

Zaključak

Da bi se redovi proširili u Tailwindu, koristite ' row-span- ” u HTML programu i navedite broj redaka koje bi svaki element trebao obuhvatiti. Za provjeru pogledajte promjene na HTML web stranici. Ovaj zapis je pokazao primjer metode za stvaranje raspona redaka u Tailwind CSS-u.

Kako napraviti raspon redova u Tailwindu?