Share
Cosa starai creandoIn questo tutorial, illustrerò le basi del layout della griglia CSS con scenari di esempio. La griglia CSS è ora supportata da quasi tutti i browser moderni ed è pronta per essere utilizzata nella produzione. A differenza di altri metodi di layout come la flexbox, il layout della griglia ti offre due gradi di libertà, il che rende così versatile il posizionamento degli elementi come un gioco da ragazzi.
Per utilizzare il layout Grid CSS, i tuoi elementi HTML dovrebbero avere una struttura specifica.
È necessario avvolgere gli elementi che si desidera controllare all'interno di un contenitore padre DIV.
1234
Aggiungiamo un po 'di stile ai nostri DIV in modo che possiamo distinguerli facilmente.
Inoltre, imposta il display: griglia nel tuo involucro DIV in modo che possiamo iniziare a utilizzare il layout della griglia.
.wrapper> div background-color: orange; bordo: 1px nero solido; .wrapper> div: nth-child (dispari) background-color: indianred; . wrapper display: grid
Da questo punto in poi, tutto lo styling andrà nel involucro DIV. Se vogliamo controllare i DIV figlio in qualsiasi momento, aggiungeremo regole di stile specifiche della griglia per il DIV figlio specifico.
Le prime cose che dobbiamo imparare sul layout della griglia sono grid-template-colonne e grid-template-righe. Queste due regole controllano fondamentalmente come viene modellata la tua griglia.
Il valore di queste regole può essere una lunghezza, una percentuale o una frazione dello spazio libero nella griglia. Puoi anche impostare qualsiasi valore su auto, che riempie lo spazio rimanente.
Vediamo alcuni esempi qui sotto.
.wrapper display: grid; grid-template-columns: 100px 100px 100px
.wrapper display: grid; grid-template-columns: 100px auto 100px
.wrapper display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
Iniziamo a costruire una griglia reale, in cui abbiamo il controllo su entrambe le colonne e le righe.
.wrapper display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 50px 50px;
.wrapper display: grid; grid-template-columns: 100px 20px 250px; grid-template-rows: 150px 40px;
Qui ho appena aggiunto altri due DIV figlio all'HTML per lo stesso CSS.
Se hai un motivo ripetuto per grid-template,puoi semplicemente ripetere e ripetere quante volte ripetere lo stesso schema.
Ad esempio, supponiamo di avere 12 elementi e di disporli orizzontalmente con la stessa larghezza. Potresti ripetere 1FR 12 volte all'interno grid-template-colonne, che non è efficace. Quindi, invece, puoi usare ripeti (12, 1fr).
.wrapper display: grid; grid-template-columns: repeat (12, 1fr)
Allo stesso modo, puoi ripetere un pattern.
.wrapper display: grid; grid-template-columns: repeat (4, 1fr 5fr 10fr);
Questa regola ti aiuta a impostare la larghezza e l'altezza delle celle della griglia.
Se non imposti questa regola, le righe e le colonne della griglia si espanderanno con il contenuto.
.wrapper display: grid; grid-template-columns: repeat (4, 1fr); grid-auto-rows: 100px;
.wrapper display: grid; grid-template-columns: repeat (4, 1fr); grid-auto-rows: 20px 80px;
Una bella caratteristica da usare con grid-auto regola è il minimo Massimo funzione.
Basta impostare la dimensione minima come primo parametro e il massimo come secondo parametro. Se si imposta auto per il secondo parametro, si ottiene una dimensione della cella reattiva.
.wrapper display: grid; grid-template-columns: repeat (4, 1fr); grid-auto-rows: minmax (50px, auto)
Di seguito puoi vedere due diversi contenuti DIV con le stesse regole CSS.
Come suggerisce il nome, questa regola crea uno spazio tra le celle della griglia.
Se usi intercapedine: 5px, ottieni una differenza di 5px tra ogni cella. In alternativa, è possibile impostare solo gli spazi tra le righe o le colonne, con grid-row-gap: 5px e grid-column-gap: 5px rispettivamente.
.wrapper display: grid; grid-template-columns: repeat (4, 1fr); grid-auto-rows: minmax (50px, auto); grid-gap: 5px;
Finora, ci siamo concentrati solo sulla forma della griglia e gli oggetti appena scorrevano nella griglia. Ora impareremo come controllare ogni oggetto individualmente.
Per posizionare gli oggetti, utilizziamo le linee della griglia come riferimento. Sotto puoi vedere le linee di riga e di colonna in nero e arancione rispettivamente per una griglia 2x4.
Useremo il grid-column e grid-fila regole con numeri di linea per posizionare gli elementi.
Ad esempio, se impostiamo grid-column: 1/3 per il primo div figlio, utilizzerà le prime due celle nella griglia.
Considera l'HTML e il CSS di seguito:
12345678
.wrapper display: grid; grid-template-columns: repeat (4, 1fr); grid-auto-rows: 100px; grid-gap: 5px;
Abbiamo quattro colonne di dimensioni uguali e otto elementi nel involucro DIV.
.div1 grid-column: 1/3;
.div1 grid-column: 1/3; grid-row: 1/3;
Puoi anche combinare queste due regole in un'unica regola, grid-area: rowStart / columnStart / rowEnd / columnEnd.
.div1 grid-area: 2/2/3/4;
Come illustrato nell'esempio precedente, gli elementi non sono legati alla struttura HTML. Si noti come il primo elemento viene riposizionato con il grid-zona regola.
Puoi nominare ogni elemento figlio e usare questi nomi per creare la tua griglia. Questo è davvero potente e rende il layout più intuitivo.
Quindi definiamo un DIV per ogni elemento che stiamo pianificando di inserire nel nostro sistema di rete.
Sto pensando di avere un header, leftColumn, rightColumn, middleTop, middleBottom, e un footer.
Quindi nel mio HTML ho bisogno di tanti DIV per bambini. I nomi delle classi possono essere qualsiasi cosa.
IntestazioneLeftColRightColmidTopmidBottomfooter
Quindi, all'interno del mio CSS, ho impostato il grid-zona nomi. Quei nomi possono essere qualsiasi cosa; non dovrebbero corrispondere ai nomi delle classi.
.header grid-area: header; background-color: LightSeaGreen; .leftCol grid-area: leftCol; colore di sfondo: arancione; .rightCol grid-area: rightCol; colore di sfondo: azzurro; .midTop grid-area: midTop; colore di sfondo: grigio chiaro; .midBottom grid-area: midBottom; colore di sfondo: rosa; .footer grid-area: footer; colore di sfondo: verde chiaro;
Quindi, dentro il mio involucro DIV, io uso il Grid-template-aree regola per disporre quegli elementi facendo riferimento ai loro nomi definiti.
Si noti che ho una griglia 4x4.
.wrapper display: grid; grid-template-columns: 1fr 4fr 4fr 1fr; grid-template-rows: 50px 100px 100px 30px; grid-template-areas: "header header header header" "leftCol midTop midTop rightCol" "leftCol midBottom midBottom rightCol" "footer footer footer footer"; grid-gap: 5px;
Se, ad esempio, voglio che il piè di pagina prenda solo due colonne e sia centrato, allora sostituisco semplicemente la prima e l'ultima apparizione di footer con un punto (.) nel Grid-template-aree.
.wrapper display: grid; grid-template-columns: 1fr 4fr 4fr 1fr; grid-template-rows: 50px 100px 100px 30px; grid-template-areas: "header header header header" "leftCol midTop midTop rightCol" "leftCol midBottom midBottom rightCol" "footer footer."; grid-gap: 5px;
La griglia CSS ha un sacco di regole e in questo tutorial ho trattato solo le più utili. È ancora possibile accedere a MDN Web Doc o a qualsiasi altra fonte per l'elenco completo delle proprietà e delle funzioni della griglia.
Accentsconagua