Ispettore del layout per Flexbox e Grid

Chrome DevTools contrassegna i contenitori flex con un badge "flex" accanto al relativo nodo DOM nel pannello Elements. Facendo clic sul badge si attiva o disattiva l'overlay Flexbox: linee colorate che mostrano l'asse principale, l'asse trasversale, i limiti degli elementi e la spaziatura dei gap.

I contenitori Grid mostrano un badge "grid". Facendo clic su di esso si attiva o disattiva l'overlay della griglia: linee colorate per colonne, righe e gap. Gli overlay persistenti (fissati nel pannello Layout) rimangono visibili mentre si scorre o si ridimensiona la viewport.

DevTools → Elements → la scheda Layout elenca tutti i contenitori flex e grid presenti nella pagina. Facendo clic sul nome di un contenitore, lo si seleziona nel DOM e si attiva o disattiva il relativo overlay. Qui è possibile configurare l'aspetto dell'overlay (colore delle linee, visibilità delle etichette, dimensioni delle tracce).

L'overlay mostra i nomi e le dimensioni delle tracce quando è attivata l'opzione "Show track sizes". Le dimensioni intrinseche (auto, min-content, max-content) e le unità frazionarie (fr) mostrano i valori in pixel risolti, rivelando come le unità fr suddividono lo spazio disponibile.

Selezioni un elemento flex (figlio di un contenitore flex). Il pannello Styles mostra l'espansione della sintassi abbreviata flex: flex-grow, flex-shrink e flex-basis. La sovrapposizione evidenzia la dimensione dell'elemento sull'asse principale, la base e l'eventuale crescita o riduzione applicata.

I contenitori Grid con grid-template-areas mostrano sovrapposizioni per le aree denominate. Ogni regione denominata è contrassegnata da un'etichetta e da un colore specifico. Questa visualizzazione consente di verificare facilmente che le assegnazioni di grid-area corrispondano al modello di layout previsto.

DevTools contrassegna distintamente i contenitori subgrid. Le relative linee delle tracce sono allineate alle tracce della griglia principale: la sovrapposizione mostra visivamente questo allineamento, confermando che gli elementi subgrid partecipano al sistema di coordinate della griglia principale.

Gli elementi non allineati sono spesso dovuti a valori errati di justify-content, align-items o align-self. La sovrapposizione flex/grid mostra la posizione degli elementi rispetto alle linee degli assi. Provi ad attivare e disattivare le proprietà di allineamento nel pannello Styles e osservi in tempo reale le modifiche alla sovrapposizione.

La sovrapposizione rappresenta lo spazio tra gli elementi come bande colorate. In questo modo è facile confermare i valori di gap e stabilire se la spaziatura proviene da gap (corretto) oppure da margin (che può collassare in modo imprevisto nelle righe flex).

La sovrapposizione della griglia distingue le tracce implicite (create automaticamente per gli elementi in overflow) da quelle esplicite (definite in grid-template). Le linee tratteggiate indicano le tracce implicite. Se il contenuto crea tracce implicite inattese, la sovrapposizione rivela immediatamente il modello di overflow.

Combini Layout Inspector con Device Mode. Ridimensioni l'area visibile e osservi in tempo reale come il ritorno a capo di flex e le tracce auto-fill/auto-fit di Grid vengono ricalcolate. In questo modo è possibile individuare i problemi del layout responsivo prima rispetto al ridimensionamento manuale della finestra del browser.

Che cosa mostra la sovrapposizione della griglia di DevTools che non è visibile nella pagina renderizzata?

Flexbox and Grid Layout Inspector di DevTools visualizza linee degli assi, dimensioni delle tracce, spaziatura, aree denominate e tracce implicite come sovrapposizioni interattive. In combinazione con il pannello Layout per la gestione delle sovrapposizioni, rende il debug dei layout CSS complessi più rapido e intuitivo rispetto alla sola lettura del CSS.