Denne artikkelen vil eksemplifisere metoden for å bruke bruddpunkter og mediespørringer på radnettet i Tailwind CSS.
Hvordan bruke brytepunkter og medieforespørsler på radnett i medvind?
For å bruke bruddpunkter og mediespørringer på radnettet i Tailwind, lag et HTML-program. Deretter definerer du antall rader for forskjellige skjermstørrelser ved å bruke ' sm ', ' md ' eller ' lg ' brytepunkter med ' rutenett-rader-
La oss utforske den praktiske implementeringen:
Trinn 1: Bruk Breakpoints og Media Queries med Row Grid i HTML-programmet
Lag et HTML-program og definer antall rader for forskjellige skjermstørrelser med ' rutenett-rader-
< kropp >
< 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 >
< / kropp >
Her:
- ' Nett Klasse brukes til å lage et rutenettoppsett.
- ' rutenett-rader-2 ” klasse spesifiserer at rutenettet skal ha 2 like store rader.
- ' md: rutenett-rader-3 ” klasse endrer rutenettet til 3 like store rader på middels skjermstørrelse.
- ' lg:rutenett-rader-5 ” klasse endrer rutenettet til 5 like store rader på den store skjermstørrelsen.
- ' grid-flow-col ” klasse plasserer rutenettelementene horisontalt i kolonner.
- ' gap-3 ”-klassen setter en avstand på 3 enheter mellom hvert rutenettelement.
- ' m-3 ” klasse gjelder en margin på 3 enheter rundt gitterbeholderen.
- ' tekst-senter ” klasse setter teksten til hvert rutenettelement til sentrum.
- ' bg-teal-500 ”-klassen setter den blågrønne fargen til bakgrunnen for rutenettelementer.
- ' s-5 ” klasse legger til en polstring på 5 enheter til innholdet inne i barnet
gjenstander.
Trinn 2: Bekreft utdata
For å sikre at bruddpunktene og mediespørringene er brukt på radnettet, se HTML-nettsiden ved å endre skjermstørrelsen:
I utgangen ovenfor kan man se at antall rader endres med skjermstørrelsen. Dette indikerer at bruddpunktene og mediespørringene har blitt brukt på radnettet.
Konklusjon
For å bruke bruddpunkter og mediespørringer på radnettet i Tailwind, definer antall rader for forskjellige skjermstørrelser ved å bruke ' sm ', ' md ' eller ' lg ' brytepunkter med ' rutenett-rader-
' verktøy. Sørg deretter for endringer på nettsiden ved å endre skjermstørrelsen. Denne artikkelen har eksemplifisert metoden for å bruke bruddpunkter og mediespørringer på radnettet i Tailwind CSS.