Dit artikel demonstreert de methode om het zweefeffect toe te passen op het kolomraster in Tailwind CSS.
Hoe zweeft u op kolomraster toe in Tailwind?
Om het zweefeffect toe te passen op het kolomraster in Tailwind, maakt u een HTML-bestand en gebruikt u de zweven ” klas met de “ grid-cols-
Volg de gegeven stappen voor praktische implementatie:
Stap 1: gebruik de eigenschap Hover met het kolomraster in het HTML-programma
Maak een HTML-programma en gebruik de ' zweven ” woning met de “ grid-cols-
< lichaam >
< div klas = 'grid grid-cols-3 hover:grid-cols-5 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 klas = 'bg-groenblauw-500 p-5' > 7 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 8 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 9 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 10 < / div >
< / div >
< / lichaam >
Hier, in het bovenliggende
- “ rooster ” klasse wordt gebruikt om een rasterlay-out te maken.
- “ grid-cols-3 ” klasse geeft aan dat het raster 3 even grote kolommen moet hebben.
- “ hover:grid-cols-5 ” klasse geeft aan dat het raster moet worden gewijzigd in 5 kolommen van gelijke grootte wanneer een muis erover beweegt.
- “ kloof-3 ” klasse stelt een afstand in van 3 eenheden tussen elk rasteritem.
- “ m-3 ” klasse hanteert een marge van 3 eenheden rondom de roostercontainer.
- “ tekstcentrum ” klasse zet de tekst van elk rasteritem in het midden.
In de onderliggende
- “ ” vertegenwoordigt het aantal rasteritems.
- “ bg-groenblauw-500 ” klasse stelt de blauwgroen kleur in op de achtergrond van rasteritems.
- “ p-5 ” klasse voegt een opvulling van 5 eenheden toe aan de inhoud binnen de onderliggende
items.Stap 2: uitvoer verifiëren
Om er zeker van te zijn dat het zweefeffect is toegepast op het kolomraster, bekijkt u de webpagina en beweegt u de muis over de rasteritems:
Het is te zien dat wanneer de muis over het rasteritem beweegt, het aantal kolommen verandert. Het geeft aan dat het zweefeffect met succes is toegepast op het kolomraster.
Conclusie
Om het zweefeffect toe te passen op het kolomraster in Tailwind, gebruikt u de zweven ” klas met de “ grid-cols-
” hulpprogramma in het HTML-programma. Het verandert het aantal kolommen bij zweven. Om zeker te zijn van wijzigingen, bekijkt u de HTML-webpagina en beweegt u de muis over rasteritems. Dit artikel heeft de methode gedemonstreerd om het zweefeffect toe te passen op het kolomraster in Tailwind CSS.