A marzo, Mozilla ha rilasciato Firefox 52, che ha aggiunto il supporto per CSS Grid Layout. Se non avete familiarità con CSS Grid, è un sistema di layout bidimensionale per il web che ci permette di creare modelli di layout nativamente nel browser. Questo significa che possiamo facilmente ricreare griglie familiari usando solo poche righe di CSS. Significa anche che possiamo fare un sacco di cose con i CSS e i layout che prima non erano possibili… ma ne riparleremo tra un po’.
Una nota veloce: questo post non vuole essere un’introduzione completa a CSS Grid, e presuppone una familiarità di base con CSS Grid. Se non l’avete ancora fatto, vi consiglio di controllare la fantastica pagina CSS Grid Layout su MDN.
I layout sul web sono sempre stati difficili. Quando il web è stato introdotto per la prima volta, non c’era un metodo per i layout. Poi vennero le tabelle (nelle tabelle, nelle tabelle, nelle tabelle). Era un metodo hackish e strano, ma funzionava. Quando i CSS sono stati introdotti alla fine degli anni ’90, gli sviluppatori hanno potuto iniziare ad usare div e float per i loro design e layout. Questo alla fine ha portato a frameworks e sistemi di griglie che hanno aiutato a dare un senso a tutti i “gotchas” come la cancellazione dei floats, i margini negativi, il responsive design e altro. Ed è così che sono andate le cose per anni. Ci sono migliaia di sistemi di griglia, ma sono tutti, più o meno, uguali.
Ora che CSS Grid Layout è una realtà, ho voluto vedere cosa ci vorrebbe per sostituire un framework di griglia esistente con CSS Grid. Per questo esperimento, ho scelto il popolare framework Bootstrap.
Ho iniziato creando un sito di base usando la griglia Bootstrap:
Guardalo su CodePen.
Quindi scomponiamo questo e convertiamolo per usare CSS Grid.
In Bootstrap, la classe .container avvolge tutto e imposta i vincoli di larghezza. Aggiunge anche un padding ai bordi destro e sinistro e centra tutto. Non c’è molto da cambiare qui. Proprio come con Bootstrap, la classe container può essere utile da usare con CSS Grid. L’ho ricreato così:
.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;}Possiamo anche aggiungere punti di rottura reattivi aggiungendo quanto segue:
@media (min-width: 992px) { .container { width: 970px; }}Bootstrap usa la classe .row per avvolgere le colonne e fornire un margine negativo a sinistra e a destra per negare il padding aggiunto dalle singole colonne. Hack come i margini negativi non sono più necessari con CSS Grid, ma se hai letto la documentazione, saprai che CSS Grid richiede un contenitore di griglia. La classe .row è il posto perfetto per farlo. Lascia che ti mostri cosa ho fatto, e poi lo scomporremo.
.row { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px;}display: grid crea il contenitore della griglia.
La proprietà grid-template-columns definisce le colonne per la griglia. Puoi usare gli spazi per definire ogni colonna individualmente, ma qui utilizziamo la notazione di ripetizione per definire 12 colonne di uguali dimensioni. 1frsi riferisce alla larghezza della singola colonna. MDN definisce l’unità fr come una nuova unità che “rappresenta una frazione dello spazio disponibile nel contenitore della griglia”. Puoi leggere di più sulle unità fr su MDN. Puoi anche leggere di più sulla proprietà grid-template-columns.
Infine, la proprietà grid-gap è una proprietà abbreviata che definisce sia la quantità di spazio tra le colonne che tra le file di colonne. Pensate ad essa come al nostro gutter. Puoi leggere di più su grid-gap qui.
Ora, tutto ciò che rimane sono le classi di colonna. Bootstrap usa le classi di colonna come .col-md-6 o .col-lg-8 per determinare il numero di colonne di un div. Inoltre fa fluttuare il div e aggiunge del padding a sinistra e a destra per creare dei canali di scolo tra le colonne. Ricreare queste classi è incredibilmente facile grazie alla proprietà abbreviata .grid-column. Per esempio, se volessimo ricreare la classe .col-md-6, possiamo usare il seguente:
@media (min-width: 992px) { .col-md-6 { grid-column: span 6; }}Semplice, vero? Nessun float. Nessun padding. Funziona e basta. L’abbreviazione grid-column specifica la dimensione e la posizione di un elemento. Possiamo usare span per indicare che questo particolare elemento deve occupare sei colonne. Il gutter è automaticamente curato grazie alla proprietà grid-gap del wrapper. Puoi imparare di più sulla proprietà grid-column qui.
Quindi cosa succede quando metti tutto insieme? Beh, il sito web ha esattamente lo stesso aspetto, ma siamo in grado di rimuovere completamente la dipendenza da Bootstrap e usare le griglie CSS native.
Guarda il sito web aggiornato su CodePen.
Questo tipo di esperimento è un divertente esercizio di apprendimento, ma può anche essere pericoloso. Per prendere in prestito una battuta del saggio filosofo Jeff Goldblum:
“Tu … eri così preoccupato di sapere se potevi o non potevi, che non ti sei fermato a pensare se avresti dovuto.”
Non vogliamo limitare CSS Grid inserendolo in una sintassi che ne limiterà il potenziale. Siamo stati in grado di ricreare facilmente la griglia di Bootstrap, ma CSS Grid è molto più potente di qualsiasi sistema di griglia che è venuto prima. Questo perché è una soluzione web-nativa costruita da zero.
Non siamo più bloccati in griglie a 12 colonne che galleggiano da sinistra a destra. Volete mettere gli elementi in posizioni precise sulla griglia, indipendentemente dal loro ordine di origine HTML? Fate pure. Volete creare elementi che si estendono su più colonne e righe? Non è un problema. Guardate questa demo che Craig Cook di Mozilla ha creato per mostrare vari modelli di layout. Provate a ricreare alcuni di questi layout usando Bootstrap (suggerimento: non è possibile). Stiamo solo grattando la superficie di ciò che le griglie CSS possono fare.