In Tailwind CSS, l'estensione di riga fa sì che un elemento occupi due o più righe all'interno della griglia. Viene utilizzato per definire il numero di righe che un elemento deve occupare/estendere. Consente agli utenti di regolare le dimensioni e la posizione dell'elemento della griglia su più righe e creare layout diversi. Inoltre, può essere utilizzato per creare layout di griglia flessibili e reattivi per le pagine web.
Questo articolo esemplifica il metodo per creare un'estensione di righe in Tailwind CSS.
Come fare un intervallo di righe in Tailwind?
Per fare in modo che le righe si estendano in Tailwind, crea un programma HTML. Quindi, utilizza il ' riga-span-
Per l'implementazione pratica, controlla i passaggi forniti:
Passaggio 1: crea l'estensione della colonna nel programma HTML
Creare un programma HTML e utilizzare il ' riga-span-
< corpo >
< div classe = 'griglia griglia-righe-4 griglia-flusso-gap-col-3 m-3 centro testo' >
< div classe = 'row-span-3 bg-teal-500 p-5' > 1 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 2 < / div >
< div classe = 'row-span-2 bg-teal-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 = 'row-span-4 bg-teal-500 p-5' > 6 < / div >
< / div >
< / corpo >
Qui, nell'elemento
- “ griglia La classe ” viene utilizzata per creare un layout a griglia.
- “ griglia-riga-4 ” class imposta il numero di righe nella griglia su 4.
- “ 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.
Negli elementi figlio
- “ riga-span-3 ” class specifica che l'elemento deve estendersi su 3 righe nella griglia.
- “ riga-span-2 La classe ” indica che l'elemento deve estendersi su 2 righe nella griglia.
- “ riga-span-4 ” class specifica che l'elemento deve estendersi su 4 righe nella griglia.
- “ bg-verde acqua-500 ” class imposta il colore verde acqua sullo sfondo dell'elemento della griglia.
- “ p-5 La classe ” aggiunge un riempimento di 5 unità al contenuto all'interno degli elementi figlio .
Passaggio 2: verificare l'output
Visualizza la pagina Web HTML per verificare se l'intervallo di riga è stato applicato o meno:
Nell'output precedente, si può osservare che l'intervallo di riga è stato applicato correttamente in base a quanto specificato.
Conclusione
Per fare in modo che le righe si estendano in Tailwind, usa ' riga-span-
” nel programma HTML e specificare il numero di righe su cui deve estendersi ciascun elemento. Per verifica, visualizzare le modifiche sulla pagina Web HTML. Questo articolo ha esemplificato il metodo per creare un'estensione di righe in Tailwind CSS.