Acest articol va exemplifica metoda de aplicare a punctelor de întrerupere și a interogărilor media pe grila de rânduri în CSS Tailwind.
Cum să aplici punctele de întrerupere și interogările media pe grila de rânduri în Tailwind?
Pentru a aplica puncte de întrerupere și interogări media pe grila de rânduri din Tailwind, creați un program HTML. Apoi, definiți numărul de rânduri pentru diferite dimensiuni de ecran folosind butonul „ sm ”, “ md ” sau ” lg ” puncte de întrerupere cu „ grid-rows-
Să explorăm implementarea practică:
Pasul 1: Utilizați punctele de întrerupere și interogările media cu grilă de rânduri în programul HTML
Creați un program HTML și definiți numărul de rânduri pentru diferite dimensiuni de ecran cu ajutorul „ grid-rows-
< corp >
< div clasă = „grid-rânduri-grilă-2 md:rânduri-grilă-3 lg:rânduri-grilă-5 grilă-flow-col gap-3 m-3 text-center” >
< div clasă = „bg-teal-500 p-5” > 1 < / div >
< div clasă = „bg-teal-500 p-5” > 2 < / div >
< div clasă = „bg-teal-500 p-5” > 3 < / div >
< div clasă = „bg-teal-500 p-5” > 4 < / div >
< div clasă = „bg-teal-500 p-5” > 5 < / div >
< div clasă = „bg-teal-500 p-5” > 6 < / div >
< div clasă = „bg-teal-500 p-5” > 7 < / div >
< div clasă = „bg-teal-500 p-5” > 8 < / div >
< div clasă = „bg-teal-500 p-5” > 9 < / div >
< div clasă = „bg-teal-500 p-5” > 10 < / div >
< / div >
< / corp >
Aici:
- „ grilă ” este utilizată pentru a crea un aspect al grilei.
- „ grilă-rânduri-2 ” clasă specifică că grila trebuie să aibă 2 rânduri de dimensiuni egale.
- „ md:grid-rows-3 ” clasa schimbă grila în 3 rânduri de dimensiuni egale pe ecran de dimensiune medie.
- „ lg:grid-rows-5 ” clasa schimbă grila în 5 rânduri de dimensiuni egale pe dimensiunea ecranului mare.
- „ grid-flow-col ” clasa plasează elementele grilei orizontal în coloane.
- „ decalajul-3 ” clasa stabilește o distanță de 3 unități între fiecare element al grilei.
- „ m-3 clasa ” aplică o marjă de 3 unități în jurul containerului grilă.
- „ centru de text ” clasa setează textul fiecărui element al grilei în centru.
- „ bg-teal-500 ” clasa setează culoarea teal pe fundalul elementelor din grilă.
- „ p-5 ” clasa adaugă o umplutură de 5 unități la conținutul din interiorul copilului
articole.
Pasul 2: Verificați ieșirea
Pentru a vă asigura că punctele de întrerupere și interogările media au fost aplicate pe grila de rânduri, vizualizați pagina web HTML modificând dimensiunea ecranului:
În rezultatul de mai sus, se poate observa că numărul de rânduri se modifică odată cu dimensiunea ecranului. Acest lucru indică faptul că punctele de întrerupere și interogările media au fost aplicate cu succes pe grila de rânduri.
Concluzie
Pentru a aplica puncte de întrerupere și interogări media pe grila de rânduri în Tailwind, definiți numărul de rânduri pentru diferite dimensiuni de ecran utilizând „ sm ”, “ md ” sau ” lg ” puncte de întrerupere cu „ grid-rows-
” utilități. Apoi, asigurați-vă modificările pe pagina web modificând dimensiunea ecranului. Acest articol a exemplificat metoda de aplicare a punctelor de întrerupere și a interogărilor media pe grila de rânduri în CSS Tailwind.