Una guida per principianti alla griglia CSS

Foto di Greg Rakozy su Unsplash

Ho sentito parlare per la prima volta di CSS Grid verso la fine del 2016. Ero seduto a uno dei miei primi incontri Tech Ladies® e un partecipante ha detto di aver sentito quanto fosse sorprendente. Avanti veloce un anno e mezzo dopo e sto finalmente scavando più a fondo in Grid. Come utente dedicato di Flexbox, posso già dire come questo cambierà il gioco.

La domanda più grande che ho avuto quando ho iniziato a conoscere CSS Grid è stata: in che modo Grid è diverso da Flexbox? E ho scoperto che in generale, Grid può fare tutto ciò che Flexbox può fare. Alcune persone pensano che Grid sia per layout multidimensionali mentre Flexbox dovrebbe essere usato per layout unidimensionali. Ma Grid è ottimo anche per i layout unidimensionali, specialmente se torni più tardi e decidi che vuoi renderlo multidimensionale.

Impostazione della griglia CSS

Grid è estremamente facile da configurare: bastano due righe di CSS.

HTML

  
1
  
2
  
3
  
4
  
5
  
6

CSS

.wrapper {
    display: griglia;
    grid-template-colonne: 10rem 10rem 10rem;
}

E voilà! Hai una griglia. Seriamente, è tutto ciò di cui hai bisogno. È abbastanza bello.

Noterai che, a differenza di quando imposti Flexbox su display: flex, aggiungendo display: grid al tuo wrapper non fa immediatamente la differenza. Questo perché non stai definendo esplicitamente quante colonne vuoi che la tua griglia abbia. Lo farai con le colonne-griglia-modello come ho fatto sopra. Quindi, in questo esempio, sto impostando tre colonne per avere una larghezza di 10rem ciascuna.

Griglia CSS di base

Puoi utilizzare qualsiasi valore desideri quando imposti le colonne del modello di griglia, ma ti suggerisco di stare lontano dalle percentuali a meno che tu non stia provando ad aggiungere fino al 100%. Questo perché dovrai prendere in considerazione la tua quantità di griglia-gap (nella quale ci immergeremo un po ') e questo può diventare un po' complicato.

Tracce esplicite vs implicite

Prima di parlare di tracce esplicite e implicite, parliamo prima di quali tracce sono. Le tracce sono il modo in cui le colonne e le righe sono numerate. Invece di contare le singole colonne e righe da sole, nella griglia CSS le conti per le linee di tracciamento. Ecco la griglia con cui abbiamo iniziato: ho numerato tutte le righe e le colonne della traccia per renderti un po 'più facile da vedere.

Griglia CSS con righe di colonna e righe di riga numerate

Puoi vedere che in realtà abbiamo quattro righe di colonna e tre righe di riga. Questo ti aiuterà quando posizionerai i tuoi oggetti sulla griglia.

Una breve nota a margine: se stai utilizzando la Developer Edition di Firefox (la versione beta del normale Firefox), in realtà ha alcuni fantastici strumenti di sviluppo per vedere i numeri delle colonne e delle tracce. Se controlli l'elemento del wrapper e poi vai alla scheda layout, seleziona la casella per il wrapper e ora la griglia apparirà come di seguito! Spero davvero che Chrome aggiunga una funzione di ispezione come questa in futuro. È estremamente utile.

Firefox Inspector Tools Inspector Tools

Torniamo alla differenza tra tracce esplicite e implicite. Se prendiamo il nostro codice dall'alto, noterai che abbiamo impostato solo le nostre colonne. In questo caso, abbiamo impostato esplicitamente le nostre colonne su tre, ma abbiamo implicitamente impostato le nostre righe. Abbiamo sei elementi, ma ovviamente tutti questi elementi non possono rientrare in tre colonne, quindi una seconda riga viene impostata in modo implicito.

Questo è un po 'confuso, quindi consiglio vivamente di fare casini con CSS Grid da solo per vedere la differenza tra tracce esplicite e implicite.

Aggiunta di gap griglia

Pensa al gap della griglia come al margine, tranne che verrà aggiunto solo tra gli elementi e non all'esterno della griglia. Mi sono imbattuto in così tanti casi quando aggiungo margine sugli articoli in una griglia Flexbox solo per andare al wrapper della griglia e impostare lo stesso margine, ma negativo, per compensare il margine che viene impostato al di fuori della griglia. Per fortuna con CSS Grid, non devi occupartene.

Prendiamo il nostro esempio CSS sopra e aggiungiamo un po 'di gap di griglia.

.wrapper {
  display: griglia;
  grid-template-colonne: 10rem 10rem 10rem;
  gap della griglia: 1rem;
}
Griglia CSS con 1rem di gap griglia

Ho usato la proprietà della stenografia gap-griglia, ma è possibile definire un valore esplicito per le colonne e le righe usando grid-column-gap e grid-row-gap.

* Nota: Chrome 66 cambierà gap-griglia in gap e griglia-colonna-gap / griglia-riga-gap in colonna-gap / riga-gap.

La funzione Repeat ()

Definire la larghezza che vuoi avere ciascuna delle tue colonne quando usi le colonne-modello-griglia con tre colonne che hanno tutte la stessa larghezza è piuttosto semplice. Ma è un sacco di digitazione se vuoi più colonne di così. Qui entra in gioco la funzione repeat ().

Ecco il nostro esempio che abbiamo utilizzato con la funzione repeat () aggiunta in.

.wrapper {
  display: griglia;
  grid-template-colonne: ripeti (3, 10rem);
  gap della griglia: 1rem;
}

Come puoi vedere nel mio CSS, sto impostando tre colonne ciascuna con una larghezza di 10rems. Questa griglia apparirà esattamente come la griglia illustrata nel nostro esempio di gap di griglia. Usando la funzione repeat () stiamo solo rendendo le cose un po 'più semplici e facili da leggere quando vuoi impostare molte colonne.

Unità frazionarie

Le unità frazionarie, o fr, sono una nuova unità di lunghezza CSS introdotta con Grid CSS e una che posso vedere mentre uso sempre. Supponiamo di voler tre colonne tutte di uguale larghezza. Invece di impostare larghezza: calc (100% / 3) sugli oggetti, possiamo usare unità frazionarie. Pensa alle unità frazionarie come "spazio libero".

Continuiamo con il nostro esempio che abbiamo utilizzato.

.wrapper {
  display: griglia;
  grid-template-colonne: 1fr 1fr 1fr;
  gap della griglia: 1rem;
}

Noterai che l'unica cosa che ho cambiato sono le colonne-griglia-modello-griglia. Ora sto dicendo al browser che voglio tre colonne e che voglio che ciascuna di queste colonne occupi un'unità frazionaria o uno "spazio libero". Funziona in modo molto simile alla proprietà flex-grow di Flexbox.

Griglia CSS usando unità frazionarie

La ragione per cui ogni elemento è un po 'più ampio rispetto al nostro esempio precedente è perché ora stanno occupando più spazio possibile mentre si inseriscono ancora in tre colonne. In questo caso, non ho impostato una larghezza elevata, quindi occupano l'intera larghezza del mio schermo. So che è un po 'difficile da vedere senza averlo sul tuo schermo, quindi ti consiglio caldamente di scherzare da solo.

Non è necessario impostare tutte le colonne su 1fr, neanche. Di seguito è riportato un esempio in cui ho impostato la mia prima e terza colonna su 10rems mentre la mia colonna centrale è 1fr. Puoi anche impostare le colonne su 2fr, 3fr e così via, e gli elementi di quella colonna occuperanno 2x, 3x (e così via) la quantità di spazio.

Griglia CSS con solo la colonna centrale impostata su 1fr

Dimensionamento dei singoli elementi della griglia

Parliamo del dimensionamento dei singoli elementi della griglia. Non è possibile posizionare una larghezza effettiva su singoli elementi, poiché abbiamo impostato esplicitamente la larghezza con le colonne-griglia-modello. Ma cosa succede se si desidera che l'elemento cinque nel nostro esempio sia la larghezza di più colonne? Possiamo farlo usando grid-column e span.

.wrapper {
  display: griglia;
  grid-template-colonne: ripeti (3, 10rem);
  gap della griglia: 1rem;
}
.item5 {
  griglia-colonna: intervallo 2;
}

Vedrai sopra che stiamo impostando la colonna della griglia dell'elemento cinque in modo che sia un intervallo di due che consentirà all'elemento cinque di estendere una larghezza di due colonne.

Griglia CSS con span su un singolo articolo

E se volessi che l'articolo cinque si estendesse su tre colonne? Questo è ciò che accadrà.

Griglia CSS che si estende sull'elemento cinque su tre colonne

Poiché l'articolo cinque inizia naturalmente dalla seconda colonna, non abbiamo spazio sufficiente per coprire la larghezza totale che abbiamo impostato. Quindi passerà alla riga successiva. Puoi applicare lo stesso concetto da griglia a colonna a griglia se desideri che un articolo si estenda su più righe.

C'è una soluzione abbastanza semplice per riparare lo spazio vuoto rimasto dall'elemento cinque che si sposta di una riga. Può essere utilizzato sia che si stia impostando un elemento su una riga o una colonna: flusso automatico della griglia: denso.

.wrapper {
  display: griglia;
  grid-template-colonne: ripeti (3, 10rem);
  gap della griglia: 1rem;
  grid-auto-flow: denso;
}
.item5 {
  griglia-colonna: intervallo 3;
}

Nella griglia CSS, la griglia controllerà automaticamente se gli elementi si adattano. Come ho detto sopra, se un articolo non si adatta, si interromperà alla riga successiva. Grid-auto-flow: denso indica alla griglia di riempire quegli spazi vuoti con qualsiasi elemento che si adatterà. In questo caso, ho aggiunto un settimo elemento griglia in modo che la griglia sposta automaticamente quello e il sesto elemento nei punti vuoti.

La griglia CSS imposterà sempre gli elementi che devono prima andare in uno specifico punto - in questo caso, l'articolo cinque, poiché si estende su tre colonne. Quindi, se si dispone del flusso automatico della griglia: set denso, cercherà altri elementi da adattare ai punti vuoti sulla griglia.

Griglia CSS con flusso automatico griglia: denso

La proprietà di flusso automatico della griglia da sola determina in quale direzione devi aggiungere un'altra riga o colonna dopo aver già definito i tuoi articoli. Row è l'impostazione predefinita. Non vedo un grande caso d'uso per questo oltre all'utilizzo del flusso automatico della griglia: denso.

Posizionamento di elementi della griglia

Nel nostro esempio con il dimensionamento dei singoli elementi della griglia, in origine stavamo impostando l'articolo cinque su griglia-colonna: intervallo 2, che consentiva all'elemento cinque di estendersi su due colonne. In realtà, grid-column è una scorciatoia per grid-column-start e grid-column-end. Lo stesso vale anche per la griglia.

Quindi, tecnicamente, stavamo impostando il quinto elemento su grid-column-start: span 2 e grid-column-end: auto. In sostanza, stavamo dicendo alla griglia di iniziare l'articolo cinque da dove naturalmente sarebbe, ma andare il doppio delle dimensioni.

Lavoriamo di nuovo con l'articolo cinque e te lo mostrerò utilizzando gli strumenti di ispezione della Firefox Developer Edition in modo che sia più facile per te vedere a che punto è l'elemento pubblicitario traccia cinque. Ho anche aggiunto un altro paio di elementi della griglia.

.wrapper {
  display: griglia;
  grid-template-colonne: ripeti (3, 10rem);
  gap della griglia: 1rem;
}
.item5 {
  grid-column-start: 1;
  griglia-colonna-fine: 3;
}

CSS Grid impaginerà tutti gli elementi prima del nostro quinto, si fermerà e guarderà dove abbiamo iniziato e finito l'articolo cinque e lo posizionerà dove gli abbiamo detto. La scorciatoia di questo sarebbe la colonna della griglia: 1/3 dove 1 è il nostro valore iniziale e 3 è il nostro valore finale.

Griglia CSS utilizzando grid-column-start e grid-column-end

È inoltre possibile indicare a un singolo elemento della griglia l'ampiezza della sua estensione e la sua destinazione. In questo esempio sto usando la proprietà della colonna della griglia abbreviata, quindi sto dicendo all'elemento cinque di estendere due colonne che terminano alla quarta traccia.

.wrapper {
  display: griglia;
  grid-template-colonne: ripeti (3, 10rem);
  gap della griglia: 1rem;
}
.item5 {
  griglia-colonna: span 2/4;
}
Griglia CSS con proprietà abbreviata colonna-griglia

Se desideri che il tuo articolo si estenda per l'intera larghezza della griglia, ma non sai quanto è grande la griglia, puoi impostare la colonna della griglia: 1 / -1. Fondamentalmente quel valore -1 sta dicendo al tuo articolo di andare fino all'ultima traccia. Se lo fai con le righe noterai che il tuo articolo potrebbe non arrivare fino in fondo alla griglia. Andrà solo alla fine delle righe esplicite, non delle righe implicite.

risorse

Ecco alcune risorse che consiglio vivamente per un approfondimento nella griglia CSS!

  • Tutorial sulla griglia CSS di Wes Bos: è totalmente gratuito ed è dove ho imparato a conoscere la griglia. Adoro il suo stile di insegnamento!
  • Guida completa ai trucchi CSS per la griglia CSS: contiene alcuni trucchi per quando sei bloccato su un certo aspetto della griglia.
  • CSS Grid Garden: un modo divertente per mettere in pratica ciò che hai imparato su Grid CSS. Consiglio di fare un tutorial prima di provare questo perché a volte diventa un po 'confuso.

Grazie per aver letto il mio tutorial su CSS Grid! Guarda i miei altri articoli come Come rispondere alla temuta domanda di intervista "Dimmi di te", "Perché dovresti assumere un Bootcamp o la mia storia su come sono diventato uno sviluppatore.

E assicurati di seguirmi su Twitter per molti tweet sulla tecnologia e, se devo essere sincero, anche molti tweet sui cani.