Denne artikel vil eksemplificere metoden til at anvende breakpoints og medieforespørgsler på rækkegitteret i Tailwind CSS.
Hvordan anvender man brudpunkter og medieforespørgsler på rækkegitter i medvind?
For at anvende breakpoints og medieforespørgsler på rækkegitteret i Tailwind skal du lave et HTML-program. Definer derefter antallet af rækker for forskellige skærmstørrelser ved hjælp af ' sm ', ' md ' eller ' lg ' brudpunkter med ' gitterrækker-
Lad os undersøge den praktiske implementering:
Trin 1: Brug brudpunkter og medieforespørgsler med rækkegitter i HTML-program
Opret et HTML-program og definer antallet af rækker for forskellige skærmstørrelser med ' gitterrækker-
< legeme >
< div klasse = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div klasse = 'bg-teal-500 p-5' > 1 < / div >
< div klasse = 'bg-teal-500 p-5' > 2 < / div >
< div klasse = 'bg-teal-500 p-5' > 3 < / div >
< div klasse = 'bg-teal-500 p-5' > 4 < / div >
< div klasse = 'bg-teal-500 p-5' > 5 < / div >
< div klasse = 'bg-teal-500 p-5' > 6 < / div >
< div klasse = 'bg-teal-500 p-5' > 7 < / div >
< div klasse = 'bg-teal-500 p-5' > 8 < / div >
< div klasse = 'bg-teal-500 p-5' > 9 < / div >
< div klasse = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / legeme >
Her:
- “ gitter ” klasse bruges til at skabe et gitterlayout.
- “ gitter-rækker-2 ” klasse angiver, at gitteret skal have 2 lige store rækker.
- “ md: gitter-rækker-3 ” klasse ændrer gitteret til 3 lige store rækker på medium skærmstørrelse.
- “ lg:gitter-rækker-5 ” klasse ændrer gitteret til 5 lige store rækker på den store skærmstørrelse.
- “ grid-flow-col ” klasse placerer gitterelementerne vandret i kolonner.
- “ mellemrum-3 ” klasse indstiller en afstand på 3 enheder mellem hver gitterelement.
- “ m-3 ” klasse anvender en margen på 3 enheder omkring gitterbeholderen.
- “ tekst-center ” klasse sætter teksten for hvert gitterelement til midten.
- “ bg-teal-500 ” klasse indstiller den blågrønne farve til baggrunden for gitterelementer.
- “ p-5 ” klasse tilføjer en polstring på 5 enheder til indholdet inde i barnet
genstande.
Trin 2: Bekræft output
For at sikre, at brudpunkterne og medieforespørgslerne er blevet anvendt på rækkegitteret, skal du se HTML-websiden ved at ændre skærmstørrelsen:
I ovenstående output kan det ses, at antallet af rækker ændres med skærmstørrelsen. Dette indikerer, at brudpunkterne og medieforespørgslerne er blevet anvendt på rækkegitteret.
Konklusion
For at anvende brudpunkter og medieforespørgsler på rækkegitteret i Tailwind skal du definere antallet af rækker for forskellige skærmstørrelser ved hjælp af ' sm ', ' md ' eller ' lg ' brudpunkter med ' gitterrækker-
' forsyningsselskaber. Sørg derefter for ændringer på websiden ved at ændre skærmstørrelsen. Denne artikel har eksemplificeret metoden til at anvende breakpoints og medieforespørgsler på rækkegitteret i Tailwind CSS.