Dit artikel illustreert de methode om breekpunten en mediaquery's toe te passen op het rijraster in Tailwind CSS.
Hoe breekpunten en mediaquery's toepassen op rijraster in Tailwind?
Maak een HTML-programma om breekpunten en mediaquery's toe te passen op het rijraster in Tailwind. Definieer vervolgens het aantal rijen voor verschillende schermformaten met behulp van de knop ' sm ”, “ md ' of ' lg ” breekpunten met de “ raster-rijen-
Laten we de praktische implementatie verkennen:
Stap 1: gebruik breekpunten en mediaquery's met rijraster in HTML-programma
Maak een HTML-programma en definieer het aantal rijen voor verschillende schermformaten met de ' raster-rijen-
< lichaam >
< div klas = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col 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:
- “ rooster ” klasse wordt gebruikt om een rasterlay-out te maken.
- “ raster-rijen-2 ” klasse geeft aan dat het raster 2 even grote rijen moet hebben.
- “ md:raster-rijen-3 ” class verandert het raster in 3 rijen van gelijke grootte op een middelgroot scherm.
- “ lg:raster-rijen-5 ” klasse verandert het raster in 5 rijen van gelijke grootte op het grote scherm.
- “ grid-flow-col ” klasse plaatst de rasteritems horizontaal in kolommen.
- “ 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.
- “ 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 het kind
artikelen.
Stap 2: uitvoer controleren
Om er zeker van te zijn dat de breekpunten en mediaquery's zijn toegepast op het rijraster, bekijkt u de HTML-webpagina door de schermgrootte te wijzigen:
In de bovenstaande uitvoer is te zien dat het aantal rijen verandert met de schermgrootte. Dit geeft aan dat de breekpunten en mediaquery's met succes op het rijraster zijn toegepast.
Conclusie
Om breekpunten en mediaquery's toe te passen op het rijraster in Tailwind, definieert u het aantal rijen voor verschillende schermformaten met behulp van de knop ' sm ”, “ md ' of ' lg ” breekpunten met de “ raster-rijen-
' nutsvoorzieningen. Zorg vervolgens voor wijzigingen op de webpagina door de schermgrootte te wijzigen. Dit artikel heeft een voorbeeld gegeven van de methode om breekpunten en mediaquery's toe te passen op het rijraster in Tailwind CSS.