Questa pagina è stata tradotta dall'API Cloud Translation.

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.

Tre schede vengono mostrate una accanto all'altra, ognuna con tre elementi di contenuto: titolo, paragrafo e link. Il testo di ciascuna è di lunghezza diversa, il che crea alcuni allineamenti imbarazzanti nelle schede quando sono affiancate.

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

Tre schede sono mostrate una accanto all'altra, ognuna con tre elementi di contenuto: titolo, paragrafo e link. Ognuno ha una lunghezza del testo diversa, ma la griglia secondaria ha corretto gli allineamenti consentendo all'elemento di contenuto più alto di impostare l'altezza della riga, risolvendo eventuali problemi di allineamento.

Browser Support

Source

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 */
}

Uno screenshot di DevTools della griglia CSS che mostra due colonne affiancate con un nome all'inizio della riga della colonna. — https://codepen.io/web-dot-dev/pen/NWezjXv

È 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.

Dalla griglia della macro al design finito. Le aree con nome della griglia vengono create in anticipo e i componenti successivi vengono posizionati come preferisci.

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.

Uno screenshot di DevTools della griglia CSS di Chrome che mostra un layout della griglia di dimensioni per dispositivi mobili, in cui le righe e le colonne sono denominate per una rapida identificazione: fullbleed, system-status, primary-nav, primary-header, main, footer e system-gestures.

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.

Stessa sovrapposizione della griglia di DevTools CSS di prima, ma questa volta con parte dell'UI del sistema mobile, alcune ombre e un po' di colore. Ti aiuta a capire la direzione del 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.

Uno screenshot ingrandito dell'overlay della griglia di DevTools, incentrato in particolare sui nomi delle colonne fullbleed-start e fullbleed-end.

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;
}

Il layout della macro finito, completo di un'immagine nidificata a larghezza intera posizionata correttamente sotto le righe di navigazione e di intestazione principali ed estesa a ciascuna delle righe di colonna denominate a tutta larghezza. — https://codepen.io/web-dot-dev/pen/WNLyjzX

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ù.

Anteprima dello screenshot del badge della griglia secondaria trovato negli elementi del riquadro Elementi.

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.