Ovaj će članak ilustrirati metodu za primjenu efekta lebdenja na uslužnom programu za automatski protok mreže u Tailwind CSS-u.
Kako primijeniti lebdenje na automatskom tijeku rešetke u stražnjem vjetru?
Da biste primijenili efekt lebdenja na automatski tok rešetke u Tailwindu, napravite HTML datoteku i upotrijebite ' lebdjeti ' klasa s ' grid-flow-
Pogledajte navedene korake za njegovu praktičnu provedbu:
Korak 1: Koristite svojstvo lebdenja s mrežom redaka u HTML programu
Napravite HTML program i koristite ' lebdjeti ” nekretnina sa željenim “ grid-flow-
< tijelo >
< div razreda = 'grid grid-flow-col hover:grid-flow-row gap-3 m-3 text-center' >
< div razreda = 'bg-teal-500 p-5' > 1 < / div >
< div razreda = 'bg-teal-500 p-5' > 2 < / div >
< div razreda = '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 = 'bg-teal-500 p-5' > 6 < / div >
< / div >
< / tijelo >
Ovdje:
- “ rešetka ” klasa postavlja element kao mrežni spremnik.
- “ grid-flow-col ” definira tok stavki mreže u stupcima.
- “ lebdjeti:grid-flow-row ” klasa mijenja tijek mrežnih stavki u retke kada mišem prijeđete iznad spremnika.
- “ praznina-3 ” dodaje razmak od 3 jedinice između stavki mreže.
- “ m-3 ” dodaje marginu od 3 jedinice oko spremnika mreže.
- “ tekst-centar ” poravnava tekstualni sadržaj unutar mrežnih stavki prema sredini.
Korak 2: Provjerite izlaz
Da biste provjerili je li efekt lebdenja primijenjen na automatski tok rešetke, pogledajte web stranicu i pomaknite miš preko stavki rešetke:
Može se uočiti da je u početku tok stavki mreže u stupcima, a kada mišem prijeđete iznad njih, tok se mijenja u retke. Ovo označava da je učinak lebdenja uspješno primijenjen na automatski tok rešetke.
Zaključak
Za primjenu efekta lebdenja na automatski tok mreže u Tailwindu, upotrijebite ' lebdjeti ” klasa sa željenim “ grid-flow-