Tailwind CSS nudi sustav rešetki koji korisnicima omogućuje dijeljenje web stranice u stupce i retke pomoću uslužnih programa grid-cols i grid-rows. Također pruža pomoćne programe za početak i kraj stupca rešetke za kontrolu veličine i postavljanja elemenata preko stupaca rešetke. Ovi uslužni programi omogućuju korisnicima određivanje početne i završne pozicije elementa unutar rasporeda mreže.
Ovaj će članak objasniti metodu za početak ili završetak stupaca na određenoj n-toj liniji rešetke u Tailwind CSS-u.
Kako učiniti da stupci počinju ili završavaju na n-toj crti mreže u Tailwindu?
Kako bi stupci počinjali ili završavali na n-toj liniji rešetke u Tailwindu, upotrijebite ' stupac-početak-
Korak 1: Navedite početne i završne pozicije elemenata mreže u HTML programu
Napravite HTML program i koristite ' stupac-početak-
< tijelo >
< h1 razreda = 'text-2xl središte teksta' >
Tailwind CSS - Početak stupca / Kraj
h1 >
< div razreda = 'grid grid-cols-4 gap-3 m-3' >
< div razreda = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 div >
< div razreda = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 div >
< div razreda = 'col-start-3 col-end-5 bg-teal-500 p-5' > 3 div >
< div razreda = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 div >
< div razreda = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 div >
div >
tijelo >
Ovdje, u nadređenom
- “ rešetka ” koristi se za stvaranje rasporeda mreže.
- “ grid-cols-4 ” klasa navodi da rešetka treba imati 4 stupca jednake veličine.
- “ praznina-3 ” klasa postavlja razmak od 3 jedinice između svake stavke mreže.
- “ m-3 ” klasa dodaje marginu od 3 jedinice oko spremnika mreže.
U unutarnjim podređenim
- “ col-start-2 ” svojstvo navodi da stavka rešetke počinje u stupcu 2.
- “ col-span-2 ” označava da stavka rešetke zauzima 2 stupca.
- “ col-start-1 ” koristi se za početak stavke mreže iz stupca 1.
- “ col-end-3 ” navodi da stavka rešetke završava u stupcu 3.
- “ col-start-3 ” označava da stavka rešetke počinje od drugog stupca.
- “ col-end-5 ” svojstvo završava stavku mreže u stupcu 5.
- “ col-span-3 ” navodi da stavka rešetke zauzima 3 stupca.
- “ bg-teal-500 ” postavlja plavozelenu boju na pozadinu svih stavki mreže.
- “ p-5 ” dodaje ispunu od 5 jedinica sadržaju unutar stavki mreže.
Korak 2: Provjerite izlaz
Kako biste bili sigurni da su početni i završni položaji stupca rešetke primijenjeni, pogledajte HTML web stranicu:
Gornji izlaz pokazuje da su početni i završni položaji stupca rešetke uspješno primijenjeni u skladu s navedenim.
Zaključak
Kako bi stupci počinjali ili završavali na n-toj liniji rešetke u Tailwindu, ' stupac-početak-