Questo articolo esemplifica il metodo per applicare punti di interruzione e media query sulla griglia di riga in Tailwind CSS.
Come applicare punti di interruzione e query multimediali sulla griglia di riga in Tailwind?
Per applicare punti di interruzione e media query sulla griglia di riga in Tailwind, crea un programma HTML. Quindi, definire il numero di righe per le varie dimensioni dello schermo utilizzando il ' sm ”, “ md ' O ' LG ” punti di interruzione con il “ grid-righe-
Analizziamo l'implementazione pratica:
Passaggio 1: utilizzare i punti di interruzione e le query multimediali con la griglia di righe nel programma HTML
Crea un programma HTML e definisci il numero di righe per le diverse dimensioni dello schermo con ' grid-righe-
< corpo >
< div classe = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div classe = 'bg-verde acqua-500 p-5' > 1 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 2 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 3 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 4 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 5 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 6 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 7 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 8 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 9 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 10 < / div >
< / div >
< / corpo >
Qui:
- “ griglia La classe ” viene utilizzata per creare un layout a griglia.
- “ griglia-righe-2 ” class specifica che la griglia dovrebbe avere 2 righe di uguali dimensioni.
- “ md:righe-griglia-3 ” class cambia la griglia in 3 righe di uguali dimensioni su schermo di medie dimensioni.
- “ lg:grid-righe-5 ” class cambia la griglia in 5 righe di uguali dimensioni sullo schermo grande.
- “ griglia-flusso-col La classe ” posiziona gli elementi della griglia orizzontalmente in colonne.
- “ divario-3 ” class imposta una spaziatura di 3 unità tra ogni elemento della griglia.
- “ m-3 ” class applica un margine di 3 unità attorno al contenitore della griglia.
- “ centro del testo ” class imposta il testo di ciascun elemento della griglia al centro.
- “ bg-verde acqua-500 ” class imposta il colore verde acqua sullo sfondo degli elementi della griglia.
- “ p-5 ” class aggiunge un padding di 5 unità al contenuto all'interno del child
elementi.
Passaggio 2: verificare l'output
Per garantire che i punti di interruzione e le query multimediali siano stati applicati alla griglia di riga, visualizzare la pagina Web HTML modificando le dimensioni dello schermo:
Nell'output sopra, si può vedere che il numero di righe cambia con la dimensione dello schermo. Ciò indica che i punti di interruzione e le query multimediali sono stati applicati correttamente alla griglia di riga.
Conclusione
Per applicare punti di interruzione e media query sulla griglia delle righe in Tailwind, definisci il numero di righe per le varie dimensioni dello schermo utilizzando ' sm ”, “ md ' O ' LG ” punti di interruzione con il “ grid-righe-
” utilità. Quindi, assicurati le modifiche sulla pagina Web modificando le dimensioni dello schermo. Questo articolo ha esemplificato il metodo per applicare punti di interruzione e media query sulla griglia di riga in Tailwind CSS.