Share
Nelle esercitazioni precedenti abbiamo imparato come impostare una griglia, definendo le sue proprietà esplicite (come grid-template-colonne e Grid-template-aree) e anche alcune delle sue proprietà implicite (come grid-auto-colonne). In questo tutorial esamineremo la proprietà stenografica griglia che tratta rapidamente tutto quanto sopra in una singola affermazione.
Come al solito, inizia dichiarando display: grid; sul tuo contenitore. Quindi, usa il griglia proprietà per disporre le righe, quindi le colonne:
.grid-1 display: grid; grid: 100px auto 300px / repeat (2, 1fr) 100px;
L'affermazione sopra dice che vogliamo tre righe esplicite di 100px, auto e 300px. E (usando il ripetere() funzione) due colonne di 1fr, quindi una di 100px. È esattamente la stessa di questa versione più lunga:
.grid-1 display: grid; grid-template-rows: 100px auto 300px; grid-template-columns: repeat (2, 1fr) 100px;
Entrambe le affermazioni ci danno questo:
I valori impliciti sono ciò che chiediamo a Grid di utilizzare oltre i valori espliciti che definiamo. Nel griglia stenografia non possiamo combinare i due quindi dobbiamo fare una scelta. Dai un'occhiata a questo, per esempio:
.grid-1 display: grid; grid: auto-flow 100px / 1fr 100px;
In questo caso abbiamo bloccato con colonne esplicite (una di 1fr, un'altra di 100px) ma le nostre righe utilizzano una forma abbreviata di grid-auto-flow e grid-auto-righe. Dice "Quando devi aggiungere più tracce alla griglia, aggiungili come righe. E fai ognuno un massimo di 100 px. " È lo stesso di questo:
.grid-1 display: grid; grid-template-columns: 1fr 100px; grid-auto-flow: row; grid-auto-rows: 100px;
Questo comportamento è abbastanza predefinito, ma vediamo un cambiamento maggiore se chiediamo invece alla nostra griglia implicita di utilizzare colonne aggiuntive:
.grid-1 display: grid; grid: 100px 300px / auto-flow 100px;
Questo ci dà due righe di 100 px e 300 px, quindi imposta in modo efficace grid-auto-flow: column;. È lo stesso di:
.grid-1 display: grid; grid-template-rows: 100px 300px; grid-auto-flow: column; grid-auto-columns: 100px;
Ora, l'algoritmo di posizionamento automatico posiziona gli articoli dall'alto verso il basso, aggiungendo colonne a destra quando esaurisce lo spazio:
Nota: non possiamo dichiarare auto-flow su entrambe le righe e colonne, che non funzioneranno.
Se ripensi al nostro tutorial Capire la griglia CSS "Algoritmo di posizionamento automatico" ti ricorderai di aver discusso scarso e denso; parole chiave che descrivono il modo in cui gli elementi sono raggruppati in una griglia. Questi possono anche essere usati insieme auto-flow, come questo:
.grid-1 display: grid; griglia: 100px 300px / flusso automatico denso 100px;
Le aree dei modelli sono un modo di denominare le aree della nostra griglia, in quello che è quasi un modo visivamente rappresentativo. Nella sua forma più semplice, useremmo semplicemente griglia per descrivere le aree del nostro modello e nient'altro:
.grid-1 display: grid; grid: "header header header" "main main sidebar" "footer footer footer";
Quindi dovremmo indicare in quale area si riempie ogni elemento della griglia, in questo modo:
.item-1 grid-area: header;
Se richiami il tutorial delle aree template originali, abbiamo ricevuto ulteriori dettagli per darci le dimensioni di colonne e righe:
.grid-1 display: grid; grid-template-columns: repeat (3, 1fr); grid-template-rows: 80px 180px 80px; grid-template-areas: "header header header" "main main sidebar" "footer footer footer";
Possiamo farlo anche noi, come segue:
.grid-1 display: grid; griglia: "header header header" 80px "main main sidebar" 180px "footer footer footer" 80px / 1fr 1fr 1fr;
Aggiungiamo le larghezze delle colonne dopo la barra (la ripetere() la funzione non funzionerà in questo caso, ma non so perché). E aggiungiamo l'altezza delle righe in linea dopo le dichiarazioni di area. Questo è ciò che finiamo con:
Questo tutorial dovrebbe darti una comprensione di come griglia lavori di proprietà stenografiche. Giocaci, guarda quali altri aspetti del modulo Grid CSS puoi usare e facci sapere quanto tempo ti risparmia!
Accentsconagua