Tento článek bude příkladem metody, jak použít efekt přechodu na obslužný program automatického toku mřížky v Tailwind CSS.
Jak použít Hover on Grid Auto Flow v Tailwind?
Chcete-li použít efekt najetí na automatický tok mřížky v Tailwindu, vytvořte soubor HTML a použijte „ vznášet se “třída s “ grid-flow-
Podívejte se na uvedené kroky pro jeho praktickou implementaci:
Krok 1: Použijte vlastnost Hover s mřížkou řádků v programu HTML
Vytvořte HTML program a použijte „ vznášet se 'vlastnost s požadovaným' grid-flow-
< tělo >
< div třída = 'grid grid-flow-col hover:grid-flow-row gap-3 m-3 text-center' >
< div třída = 'bg-teal-500 p-5' > 1 < / div >
< div třída = 'bg-teal-500 p-5' > 2 < / div >
< div třída = 'bg-teal-500 p-5' > 3 < / div >
< div třída = 'bg-teal-500 p-5' > 4 < / div >
< div třída = 'bg-teal-500 p-5' > 5 < / div >
< div třída = 'bg-teal-500 p-5' > 6 < / div >
< / div >
< / tělo >
Tady:
- “ mřížka ” nastaví prvek jako kontejner mřížky.
- “ grid-flow-col ” definuje tok položek mřížky ve sloupcích.
- “ hover:grid-flow-row ” změní tok položek mřížky na řádky, když najedete myší na kontejner.
- “ mezera-3 “ přidává mezeru 3 jednotek mezi položky mřížky.
- “ m-3 “ přidává okraj 3 jednotek kolem mřížkového kontejneru.
- “ textové centrum ” zarovná obsah textu uvnitř položek mřížky na střed.
Krok 2: Ověřte výstup
Chcete-li ověřit, zda byl na automatický tok mřížky aplikován efekt umístění kurzoru, zobrazte webovou stránku a přesuňte kurzor myši na položky mřížky:
Lze pozorovat, že zpočátku je tok položek mřížky ve sloupcích a když na ně najedete myší, tok se změní na řádky. To znamená, že efekt přechodu byl úspěšně aplikován na automatický tok mřížky.
Závěr
Chcete-li použít efekt najetí na automatický tok mřížky v Tailwindu, použijte „ vznášet se “třída s požadovaným” grid-flow-