Dit artikel geeft een voorbeeld van de methode om het zweefeffect toe te passen op het hulpprogramma voor automatische doorstroming van het raster in Tailwind CSS.
Hoe Hover on Grid Auto Flow toepassen in Tailwind?
Om het zweefeffect toe te passen op de automatische stroom van het raster in Tailwind, maakt u een HTML-bestand en gebruikt u de zweven ” klas met de “ grid-flow-
Kijk naar de gegeven verstrekte stappen voor de praktische implementatie ervan:
Stap 1: gebruik de eigenschap Hover met het rijraster in het HTML-programma
Maak een HTML-programma en gebruik de ' zweven ” woning met de gewenste “ grid-flow-
< lichaam >
< div klas = 'grid grid-flow-col hover:grid-flow-row gap-3 m-3 text-center' >
< div klas = 'bg-groenblauw-500 p-5' > 1 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 2 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 3 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 4 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 5 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 6 < / div >
< / div >
< / lichaam >
Hier:
- “ rooster ” klasse stelt het element in als een rastercontainer.
- “ grid-flow-col ” definieert de stroom van rasteritems in kolommen.
- “ hover:grid-flow-rij ” class verandert de stroom van rasteritems in rijen wanneer de muis over de container beweegt.
- “ kloof-3 ” voegt een opening van 3 eenheden toe tussen de rasteritems.
- “ m-3 ” voegt een marge van 3 eenheden toe rond de roostercontainer.
- “ tekstcentrum ” lijnt de tekstinhoud binnen de rasteritems uit naar het midden.
Stap 2: uitvoer controleren
Om te controleren of het zweefeffect is toegepast op de automatische doorstroming van het raster, bekijkt u de webpagina en beweegt u de muis over de rasteritems:
Het kan worden waargenomen dat de stroom van rasteritems in eerste instantie in kolommen is en wanneer de muis erover beweegt, verandert de stroom in rijen. Dit geeft aan dat het zweefeffect met succes is toegepast op de automatische doorstroming van het raster.
Conclusie
Om het zweefeffect toe te passen op de automatische stroom van het raster in Tailwind, gebruikt u de zweven ” klas met de gewenste “ grid-flow-