Griglia CSS

Data di pubblicazione: 28 settembre 2023

La griglia CSS è un motore di layout molto potente, ma le tracce di riga e colonna create in una griglia principale possono essere utilizzate solo per posizionare i figli diretti del contenitore della griglia. Eventuali linee e aree della griglia con nome definite dall'autore andavano perse in qualsiasi altro elemento diverso da un elemento secondario diretto. Con subgrid, le dimensioni, i modelli e i nomi dei canali possono essere condivisi con le griglie nidificate. Questo articolo spiega come funziona.

Prima della griglia secondaria, i contenuti venivano spesso personalizzati manualmente per evitare layout irregolari come questo.

Dopo la griglia secondaria, è possibile allineare i contenuti di dimensioni variabili.

Nozioni di base sulle sottogriglie

Di seguito è riportato un caso d'uso semplice che illustra le nozioni di base del CSS subgrid. Una tabella viene definita con due colonne denominate, la prima è larga 20ch e la seconda è "il resto" dello spazio 1fr. I nomi delle colonne non sono obbligatori, ma sono molto utili a scopo illustrativo e didattico.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

Poi, un elemento secondario di questa griglia, che si estende su queste due colonne, viene impostato come contenitore della griglia e adotta le colonne del relativo elemento principale impostando grid-template-columns su subgrid.

.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}

È tutto, le colonne di una griglia principale sono state effettivamente trasmesse a un livello inferiore a una griglia secondaria. Ora questa sottogriglia può assegnare elementi figlio a una di queste colonne.

Sfida! Ripeti la stessa demo, ma per grid-template-rows.

Condividere una griglia "macro" a livello di pagina

I designer spesso lavorano con griglie condivise, tracciando linee su un intero design e allineando a queste qualsiasi elemento. Ora anche gli sviluppatori web possono farlo. Ora è possibile realizzare questo flusso di lavoro esatto e molti altri.

L'implementazione del flusso di lavoro della griglia del designer più comune può fornire eccellenti informazioni sulle funzionalità, sui flussi di lavoro e sulle potenzialità di subgrid.

Ecco uno screenshot di Chrome DevTools di una macro grid per il layout di pagine mobile. Le linee hanno nomi e sono presenti aree ben definite per il posizionamento dei componenti.

Il seguente CSS crea questa griglia, con righe e colonne denominate per il layout del dispositivo. Ogni riga e colonna ha una dimensione.

.device {
    display: grid;
    grid-template-rows:
      [system-status] 3.5rem
      [primary-nav] 3rem
      [primary-header] 4rem
      [main] auto
      [footer] 4rem
      [system-gestures] 2rem
    ;
    grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
}

Alcuni stili aggiuntivi generano il seguente design.

All'interno di questo elemento principale sono presenti vari elementi nidificati. Il design richiede un'immagine intera sotto le righe di navigazione e dell'intestazione. I nomi delle righe di colonna più a sinistra e a destra sono fullbleed-start e fullbleed-end. Assegnare questo nome alle linee della griglia consente ai bambini di allinearsi contemporaneamente a ciascuna con la scrittura abbreviata del posizionamento di fullbleed. È molto comodo, come vedrai a breve.

Con il layout generale del dispositivo creato con righe e colonne ben denominate, utilizza subgrid per passare le righe e le colonne ben denominate ai layout di griglia nidificati. Questo è quel subgrid momento magico. Il layout del dispositivo passa le righe e le colonne denominate al contenitore dell'app, che le trasmette a tutti i suoi elementi secondari.

.device > .app,
.app > * {
    display: grid;
    grid: subgrid / subgrid;

    /* same as */
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
}

La griglia secondaria CSS è un valore utilizzato al posto di un elenco di righe della griglia. Le righe e le colonne dell'elemento che si estendono dall'elemento principale ora sono le stesse righe e colonne che offre. In questo modo, i nomi delle righe della griglia .device sono disponibili per i figli di .app, anziché solo per .app. Gli elementi all'interno di .app non potevano fare riferimento ai canali della griglia creati da .device prima della sottogriglia.

Una volta definiti tutti questi elementi, l'immagine nidificata può ora occupare tutto lo spazio a disposizione nel layout grazie a subgrid. Nessun valore negativo o trucco, ma un'unica riga che dice "il mio layout va da fullbleed-start a fullbleed-end".

.app > main img {
    grid-area: fullbleed;
}

Ecco una macro griglia come quella utilizzata dai designer, implementata in CSS. Questo concetto può essere scalato e può crescere con te in base alle esigenze.

Verificare la presenza di assistenza

Il miglioramento progressivo con CSS e sottogriglia è familiare e semplice. Utilizza @supports e all'interno delle parentesi chiedi al browser se riconosce la sottogriglia come valore per le colonne o le righe del modello. Il seguente esempio verifica se la proprietà grid-template-columns supporta la parola chiave subgrid. Se il valore è true, significa che è possibile utilizzare la sottogriglia.

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

DevTools

Chrome, Edge, Firefox e Safari dispongono di ottimi strumenti per sviluppatori CSS grid e Chrome, Edge e Firefox dispongono di strumenti specifici per la gestione delle sottogriglia. Chrome ha annunciato i propri strumenti in 115, mentre Firefox li ha da un anno o più.

Il badge della sottogriglia funziona come il badge della griglia, ma distingue visivamente le griglie che sono sottogriglie da quelle che non lo sono.

Risorse

Questo elenco è una raccolta di articoli, demo e ispirazioni generali sulle sottogriglie per iniziare. Se stai cercando il passaggio successivo per la formazione sulla sottostruttura, divertiti a esplorare tutte queste fantastiche risorse.

• MDN
• Rachel Andrew con sottotitoli codificati allineati
• Rachel Andrew con 10 esempi fantastici
• Rachel Andrew con un sito di esempi
• Articolo di Ahmad Shadeed
• Michelle Barker al CSS Day 2022
• Carte
  • Codepen di Jhey
  • Codepen di Ahmad Shadeed
  • Codepen di Takeshi Kano
  • Codepen di Arvid
  • Codepen di Chris Coyier
  • Codepen di Miriam Suzanne
• Chris Coyier con i moduli
• Facundo Corradini con allineamento del modulo
• Chris Coyier con gli indicatori di allineamento degli elementi dell'elenco
• Michelle Barker esce dal contenitore per allinearsi alla griglia principale
• Miriam Suzanne mostra i nomi delle righe con nome e le interazioni con la sottogriglia
• Kevin Powell con le nozioni di base sulle aree con nome
• Kevin Powell con elenchi allineati
• Shannon Moeller con elenchi allineati
• Kevin Powell con una griglia a livello di pagina trasmessa ai componenti
• Elad Shechter con un overlay e un fallback di devtool
• Aaron Iker con un bel uso tipografico della griglia secondaria per l'allineamento di base delle note a piè di pagina
• Adam Argyle con un'immagine a tutta pagina all'interno di un articolo