Ta članek bo ponazoril metodo za uporabo prelomnih točk in medijskih poizvedb na mreži vrstic v Tailwind CSS.
Kako uporabiti prelomne točke in medijske poizvedbe na mreži vrstic v Tailwindu?
Če želite uporabiti prelomne točke in medijske poizvedbe na mreži vrstic v Tailwindu, naredite program HTML. Nato določite število vrstic za različne velikosti zaslona z uporabo ' sm ”, “ md « ali » lg ' prelomne točke z ' grid-rows-
Oglejmo si praktično izvedbo:
1. korak: uporabite prelomne točke in medijske poizvedbe z mrežo vrstic v programu HTML
Ustvarite program HTML in določite število vrstic za različne velikosti zaslona z ' grid-rows-
< telo >
< div razred = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div razred = 'bg-teal-500 p-5' > 1 < / div >
< div razred = 'bg-teal-500 p-5' > 2 < / div >
< div razred = 'bg-teal-500 p-5' > 3 < / div >
< div razred = 'bg-teal-500 p-5' > 4 < / div >
< div razred = 'bg-teal-500 p-5' > 5 < / div >
< div razred = 'bg-teal-500 p-5' > 6 < / div >
< div razred = 'bg-teal-500 p-5' > 7 < / div >
< div razred = 'bg-teal-500 p-5' > 8 < / div >
< div razred = 'bg-teal-500 p-5' > 9 < / div >
< div razred = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / telo >
Tukaj:
- “ mreža ” se uporablja za ustvarjanje mrežne postavitve.
- “ mrežne vrstice-2 ” določa, da mora imeti mreža 2 enako veliki vrstici.
- “ md:grid-rows-3 ” spremeni mrežo v 3 enako velike vrstice na srednje velikem zaslonu.
- “ lg:grid-rows-5 ” spremeni mrežo v 5 enakih vrstic na velikem zaslonu.
- “ grid-flow-col ” postavlja elemente mreže vodoravno v stolpce.
- “ vrzel-3 ” nastavi razmik 3 enot med vsakim elementom mreže.
- “ m-3 ” uporabi rob 3 enot okoli vsebnika mreže.
- “ besedilno središče ” nastavi besedilo vsakega elementa mreže na sredino.
- “ bg-teal-500 ” nastavi modrozeleno barvo za ozadje elementov mreže.
- “ p-5 ” doda vsebini v otroku oblazinjenje 5 enot
predmete.
2. korak: Preverite izhod
Če želite zagotoviti, da so bile prelomne točke in medijske poizvedbe uporabljene na mreži vrstic, si oglejte spletno stran HTML tako, da spremenite velikost zaslona:
V zgornjem izhodu je razvidno, da se število vrstic spreminja z velikostjo zaslona. To pomeni, da so bile prelomne točke in medijske poizvedbe uspešno uporabljene v mreži vrstic.
Zaključek
Če želite uporabiti prekinitvene točke in medijske poizvedbe na mreži vrstic v Tailwindu, določite število vrstic za različne velikosti zaslona s pomočjo » sm ”, “ md « ali » lg ' prelomne točke z ' grid-rows-
” pripomočki. Nato zagotovite spremembe na spletni strani s spremembo velikosti zaslona. Ta članek je ponazoril metodo za uporabo prelomnih točk in medijskih poizvedb na mreži vrstic v Tailwind CSS.