See artikkel illustreerib meetodit hõljutusefekti rakendamiseks Tailwind CSS-i võrgu automaatse voo utiliidile.
Kuidas rakendada hõljukit võrgu automaatsele voolule taganttuules?
Hõljutusefekti rakendamiseks Tailwindis ruudustiku automaatsele voolule looge HTML-fail ja kasutage hõljuma ' klass koos ' grid-flow-
Vaadake selle praktilise rakendamise etteantud samme:
1. toiming: kasutage hõljukatribuuti HTML-programmis rearuudustikuga
Looge HTML-programm ja kasutage ' hõljuma 'vara soovitud' grid-flow-
< keha >
< div klass = 'grid grid-flow-col hover: grid-flow-rea vahe-3 m-3 tekstikeskus' >
< div klass = 'bg-teal-500 p-5' > 1 < / div >
< div klass = 'bg-teal-500 p-5' > 2 < / div >
< div klass = 'bg-teal-500 p-5' > 3 < / div >
< div klass = 'bg-teal-500 p-5' > 4 < / div >
< div klass = 'bg-teal-500 p-5' > 5 < / div >
< div klass = 'bg-teal-500 p-5' > 6 < / div >
< / div >
< / keha >
Siin:
- “ võre ” klass määrab elemendi ruudustiku konteinerina.
- “ grid-flow-col ” määrab ruudustiku üksuste voo veergudes.
- “ hover:grid-flow-row ” klass muudab ruudustiku elementide voo ridadeks, kui hiir hõljub konteineri kohal.
- “ vahe-3 ” lisab ruudustiku elementide vahele 3 ühikut.
- “ m-3 ” lisab ruudukonteineri ümber 3 ühiku suuruse varu.
- “ tekstikeskus ” joondab teksti sisu ruudustiku üksuste sees keskele.
2. samm: kontrollige väljundit
Kontrollimaks, kas ruudustiku automaatsele voolule on hõljutusefekti rakendatud, vaadake veebilehte ja liigutage kursorit ruudustiku üksuste kohal.
Võib täheldada, et algselt on ruudustiku elementide voog veergudes ja kui hiir liigub nende kohal, muudetakse voog ridadeks. See näitab, et hõljumise efekt on edukalt rakendatud ruudustiku automaatsele voolule.
Järeldus
Hõljutusefekti rakendamiseks ruudustiku automaatsele voolule Tailwindis kasutage nuppu hõljuma ' klass soovitud ' grid-flow-