Scopri la griglia CSS in 5 minuti

Un breve tutorial sul futuro dei layout dei siti Web.

I layout di griglia sono fondamentali per la progettazione di siti Web e il modulo Griglia CSS è lo strumento più potente e più semplice per crearlo. Personalmente penso che sia molto meglio che per esempio Bootstrap (leggi perché qui).

Quest'anno il modulo ha anche ottenuto il supporto nativo dai principali browser (Safari, Chrome, Firefox, Edge), quindi credo che tutti gli sviluppatori front-end dovranno imparare questa tecnologia in un futuro non troppo lontano.

In questo articolo, ti illustrerò le basi della griglia CSS il più rapidamente possibile. Lascerò fuori tutto ciò di cui non ti dovresti preoccupare fino a quando non avrai compreso le basi.

Ho anche creato un corso Grid CSS gratuito. Clicca qui per avere pieno accesso ad esso.

In alternativa, consulta questo articolo, che spiega cosa imparerai durante il corso:

Adesso saltiamoci dentro!

Il tuo primo layout a griglia

I due ingredienti principali di una griglia CSS sono il wrapper (genitore) e gli elementi (figli). Il wrapper è la griglia effettiva e gli elementi sono il contenuto all'interno della griglia.

Ecco il markup per un wrapper con sei elementi al suo interno:

  
1   
2   
3   
4   
5   
6

Per trasformare il nostro div wrapper in una griglia, diamo semplicemente una visualizzazione della griglia:

.wrapper {
    display: griglia;
}

Ma questo non fa ancora nulla, poiché non abbiamo definito come vogliamo che la nostra griglia appaia. Impilerà semplicemente 6 div uno sopra l'altro.

Ho aggiunto un po 'di stile, ma questo non ha nulla a che fare con la griglia CSS.

Colonne e righe

Per renderlo bidimensionale, dovremo definire le colonne e le righe. Creiamo tre colonne e due righe. Useremo le proprietà grid-template-row e grid-template-column.

.wrapper {
    display: griglia;
    grid-template-colonne: 100px 100px 100px;
    grid-template-file: 50px 50px;
}

Dato che abbiamo scritto tre valori per le colonne-griglia-modello, otterremo tre colonne. Otterremo due righe, poiché abbiamo specificato due valori per le righe del modello di griglia.

I valori dettano quanto vogliamo che le nostre colonne siano (100px) e quanto dovremmo essere alte le nostre righe (50px). Ecco il risultato:

Per essere sicuro di comprendere correttamente la relazione tra i valori e l'aspetto della griglia, dai un'occhiata anche a questo esempio.

.wrapper {
    display: griglia;
    colonne-griglia-modello: 200px 50px 100px;
    righe-griglia-modello: 100px 30px;
}

Prova a capire la connessione tra il codice e il layout.

Ecco come si svolge:

Posizionamento degli oggetti

La prossima cosa che dovrai imparare è come posizionare gli oggetti sulla griglia. È qui che ottieni superpoteri, in quanto semplifica la creazione di layout.

Creiamo una griglia 3x3, utilizzando lo stesso markup di prima.

.wrapper {
    display: griglia;
    grid-template-colonne: 100px 100px 100px;
    righe-griglia-modello: 100px 100px 100px;
}

Ciò comporterà il seguente layout:

Nota, vediamo solo una griglia 3x2 sulla pagina, mentre l'abbiamo definita come una griglia 3x3. Questo perché abbiamo solo sei articoli con cui riempire la griglia. Se ne avessimo altri tre, verrebbe riempita anche la riga più bassa.

Per posizionare e ridimensionare gli elementi, li sceglieremo come target e utilizzeremo le proprietà della colonna della griglia e della riga della griglia:

.item1 {
    grid-column-start: 1;
    griglia-colonna-fine: 4;
}

Quello che stiamo dicendo qui è che vogliamo che item1 inizi sulla prima riga della griglia e finisca sulla quarta riga della colonna. In altre parole, occuperà l'intera riga. Ecco come si svolgerà sullo schermo:

Sei confuso perché abbiamo 4 righe di colonna quando abbiamo solo 3 colonne. Dai un'occhiata a questa immagine, in cui ho disegnato le linee della colonna in nero:

Si noti che ora stiamo utilizzando tutte le righe della griglia. Quando abbiamo fatto in modo che il primo articolo occupasse l'intera prima riga, ha spinto verso il basso gli altri elementi.

Infine, vorrei mostrare un modo più semplice di scrivere la sintassi sopra:

.item1 {
    griglia-colonna: 1/4;
}

Per essere sicuro di aver compreso bene questo concetto, riorganizziamo un po 'gli elementi.

.item1 {
    grid-column-start: 1;
    griglia-colonna-fine: 3;
}
.item3 {
    grid-row-start: 2;
    fine riga griglia: 4;
}
.item4 {
    griglia-colonna-inizio: 2;
    griglia-colonna-fine: 4;
}

Ecco come appare sulla pagina. Cerca di avvolgerti la testa perché sembra che funzioni. Non dovrebbe essere troppo difficile.

E quello è stato!

Naturalmente ci sono tonnellate di concetti che non abbiamo ancora affrontato. E se vuoi imparare quelli, dai un'occhiata al mio corso di griglia CSS gratuito su Scrimba.

Grazie per aver letto! Mi chiamo Per Borgen e scrivo spesso per imparare cose nuove. Seguimi su Twitter e Instagram se vuoi rimanere in contatto.