Questa pagina è stata tradotta dall'API Cloud Translation.

Griglia CSS

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. Tutte le aree e le linee della griglia denominate definite dall'autore andranno perse su qualsiasi altro elemento rispetto a 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 per evitare layout frastagliati come questo.

Tre schede vengono mostrate una accanto all'altra, ognuna con tre elementi di contenuto: titolo, paragrafo e link. Ognuna ha una lunghezza del testo diversa e crea
alcuni strani allineamenti nelle schede una accanto all'altra.

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

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

Supporto dei browser

Origine

Nozioni di base sulla griglia secondaria

Ecco un caso d'uso semplice che introduce le nozioni di base di CSS subgrid. Una griglia è 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 quella griglia occupa queste due colonne, viene impostato come contenitore della griglia e adotta le colonne dell'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

Ecco fatto: le colonne di una griglia principale sono state trasferite di un livello a una griglia secondaria. Questa griglia secondaria ora può assegnare elementi secondari a una di queste colonne.

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

Condividi 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 macro griglia 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 più comune della griglia di progettazione può fornire eccellenti insight sulle funzionalità, sui flussi di lavoro e sulle potenzialità di subgrid.

Questo è uno screenshot acquisito da Chrome DevTools di una macro del layout delle pagine per dispositivi mobili. Le linee hanno nomi e sono presenti aree ben definite per il posizionamento dei componenti.

Uno
screenshot di DevTools griglia CSS di Chrome che mostra un layout a griglia di dimensioni mobile
in cui le righe e le colonne sono denominate per una rapida identificazione: fullbleed,
system-status, main-nav, Primary-header, main, footer e system-gesture.

Il seguente CSS crea questa griglia, con righe e colonne denominate per il layout 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.

Simile a un overlay di griglia CSS DevTools di prima, ma questa volta con alcune UI del sistema mobile presenti, alcune ombre e un po' di colore. Aiuta a capire dove sta andando il progetto.

All'interno di questo elemento padre, sono presenti vari elementi nidificati. Il design richiede un'immagine a larghezza intera sotto le righe di navigazione e di intestazione. I nomi delle righe di colonna più a sinistra e a destra sono fullbleed-start e fullbleed-end. L'assegnazione di nomi alle linee della griglia consente agli elementi secondari di allinearsi a ciascuno contemporaneamente con la scorciatoia del posizionamento di fullbleed. È molto pratico, come vedremo a breve.

Uno
screenshot ingrandito dell'overlay della griglia di DevTools, in particolare sui
nomi delle colonne all'inizio e alla fine al vivo.

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 momento magico di subgrid. 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 tracce della griglia. Le righe e le colonne che l'elemento comprende rispetto all'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 alle tracce della griglia create da .device prima della griglia secondaria.

Una volta definiti tutti questi elementi, l'immagine nidificata può ora occupare tutto lo spazio a disposizione nel layout grazie a subgrid. Non ci sono valori negativi o trucchi, ma un bel testo di 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 che si posiziona correttamente sotto la barra di navigazione principale e le righe di intestazione e che si estende a ciascuna delle righe di colonna con nome al vivo. — https://codepen.io/web-dot-dev/pen/WNLyjzX

Eccola, una griglia di macro implementata in CSS, come quella usata dai designer. Questo concetto può crescere e crescere insieme a te in base alle tue esigenze.

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

Screenshot di anteprima del badge della griglia secondaria presente negli elementi nel 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.