Tailwind CSS offre un sistema a griglia che consente agli utenti di dividere la pagina Web in colonne e righe utilizzando le utilità grid-cols e grid-rows. Fornisce inoltre le utilità di inizio e fine della colonna della griglia per controllare il dimensionamento e il posizionamento degli elementi nelle colonne della griglia. Queste utilità consentono agli utenti di specificare le posizioni iniziale e finale di un elemento all'interno del layout della griglia.
Questo articolo spiegherà il metodo per fare in modo che le colonne inizino o finiscano in corrispondenza dell'ennesima linea della griglia specifica in Tailwind CSS.
Come fare in modo che le colonne inizino o finiscano all'ennesima linea della griglia in Tailwind?
Per fare in modo che le colonne inizino o finiscano all'ennesima linea della griglia in Tailwind, utilizza il comando ' col-start-
Passaggio 1: specificare le posizioni iniziale e finale degli elementi della griglia nel programma HTML
Crea un programma HTML e usa il ' col-start-
< corpo >
< h1 classe = 'centro testo testo-2xl' >
Tailwind CSS - Inizio colonna / FINE
h1 >
< div classe = 'griglia griglia-cols-4 gap-3 m-3' >
< div classe = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 div >
< div classe = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 div >
< div classe = 'col-start-3 col-end-5 bg-teal-500 p-5' > 3 div >
< div classe = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 div >
< div classe = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 div >
div >
corpo >
Qui, nell'elemento
- “ griglia ” viene utilizzato per creare un layout a griglia.
- “ grid-cols-4 ” class specifica che la griglia dovrebbe avere 4 colonne di uguali dimensioni.
- “ divario-3 ” class imposta una spaziatura di 3 unità tra ogni elemento della griglia.
- “ m-3 ” class aggiunge un margine di 3 unità attorno al contenitore della griglia.
Negli elementi
- “ col-start-2 La proprietà ” specifica che l'elemento della griglia inizia dalla colonna 2.
- “ col-span-2 ” indica che l'elemento della griglia occupa 2 colonne.
- “ col-start-1 ” viene utilizzato per iniziare l'elemento della griglia dalla colonna 1.
- “ col-fine-3 ” specifica che l'elemento della griglia termina alla colonna 3.
- “ col-start-3 ” indica che l'elemento della griglia inizia dalla seconda colonna.
- “ col-fine-5 La proprietà ” termina l'elemento della griglia alla colonna 5.
- “ col-span-3 ” specifica che l'elemento della griglia occupa 3 colonne.
- “ bg-verde acqua-500 ” imposta il colore verde acqua sullo sfondo di tutti gli elementi della griglia.
- “ p-5 ” aggiunge un riempimento di 5 unità al contenuto all'interno degli elementi della griglia.
Passaggio 2: verificare l'output
Per assicurarsi che le posizioni iniziale e finale della colonna della griglia siano state applicate, visualizzare la pagina Web HTML:
L'output precedente indica che le posizioni iniziale e finale della colonna della griglia sono state applicate correttamente in base a quanto specificato.
Conclusione
Per fare in modo che le colonne inizino o finiscano all'ennesima linea della griglia in Tailwind, il ' col-start-