Esaminare i layout della griglia CSS

Jecelyn Yeen

Sofia Emelianova

Questa guida spiega come trovare griglie CSS su una pagina, esaminarle ed eseguire il debug dei problemi di layout nel riquadro Elementi di Chrome DevTools.

Gli esempi mostrati negli screenshot dell'articolo provengono da queste due pagine web: Confezione di frutta e Confezione di snack.

Scopri le griglie CSS

Quando a un elemento HTML della tua pagina sono applicati display: grid o display: inline-grid, puoi vedere un badge grid accanto nel riquadro Elementi.

Fai clic sul badge per attivare/disattivare la visualizzazione di una griglia sulla pagina. L'overlay viene visualizzato sopra l'elemento, come una griglia, per mostrare la posizione delle linee e delle tracce della griglia:

Apri il riquadro Layout. Quando le griglie sono incluse in una pagina, il riquadro Layout include una sezione Griglia contenente una serie di opzioni per la visualizzazione delle griglie.

Allinea gli elementi della griglia e i relativi contenuti con l'editor della griglia

Puoi allineare gli elementi della griglia e i relativi contenuti con un clic su un pulsante anziché digitare le regole CSS.

Per allineare gli elementi della griglia e i relativi contenuti:

1. Nel riquadro Elementi > Stili, fai clic sul pulsante Editor griglia accanto a display: grid.

   

2. Nell'Editor griglia, fai clic sui pulsanti corrispondenti per impostare le proprietà CSS align-* e justify-* per gli elementi della griglia e i relativi contenuti.

   

3. Osserva i contenuti e gli elementi della griglia regolati nell'area visibile.

Opzioni di visualizzazione griglia

La sezione Griglia nel riquadro Layout contiene due sezioni secondarie:

• Impostazioni di visualizzazione in overlay
• Overlay griglia

Esaminiamo nel dettaglio ciascuna di queste sottosezioni.

Impostazioni di visualizzazione in overlay

Le impostazioni di visualizzazione per overlay sono composte da due parti:

a. Un menu a discesa con le seguenti opzioni:

• Nascondi etichette linea: nascondi le etichette delle linee per ciascun overlay della griglia.
• Mostra numeri di riga: mostra i numeri delle righe per ciascun overlay della griglia (selezionato per impostazione predefinita).
• Mostra nomi delle linee: mostra i nomi delle linee per ciascun overlay della griglia nel caso di griglie con nomi di linee.

b. Caselle di controllo con opzioni al loro interno:

• Mostra dimensioni delle tracce: attiva/disattiva questa opzione per mostrare o nascondere le dimensioni delle tracce.
• Mostra nomi delle aree: attiva/disattiva per mostrare o nascondere i nomi delle aree, nel caso di griglie con aree della griglia denominate.
• Estendi linee della griglia: per impostazione predefinita, le linee della griglia vengono mostrate solo all'interno dell'elemento con display: grid o display: inline-grid impostato; quando attivi questa opzione, le linee della griglia si estendono fino al bordo dell'area visibile lungo ogni asse.

Esaminiamo queste impostazioni in maggiore dettaglio.

Mostra numeri delle righe

Per impostazione predefinita, i numeri di riga positivi e negativi vengono visualizzati nell'overlay della griglia.

Nascondi etichette linea

Seleziona Nascondi etichette linea per nascondere i numeri delle linee.

Mostra nomi delle linee

Puoi selezionare Mostra nomi delle righe per visualizzare i nomi delle righe anziché i numeri. In questo esempio, abbiamo quattro righe con i nomi: left, middle1, middle2 e destro.

In questa demo, l'elemento arancione si estende da sinistra a destra, con il CSS grid-column: left / right. Mostrare i nomi delle linee semplifica la visualizzazione della posizione iniziale e finale dell'elemento.

Mostra le dimensioni delle tracce

Seleziona la casella di controllo Mostra dimensioni traccia per visualizzare le dimensioni delle tracce della griglia.

DevTools mostrerà [authored size] - [computed size] in ogni etichetta di riga: Creato: la dimensione definita nel foglio di stile (omessa se non definita). Dimensioni calcolate: le dimensioni effettive sullo schermo.

In questa demo, le dimensioni delle colonne snack-box sono definite nel file CSS grid-template-columns:1fr 2fr;. Pertanto, le etichette delle righe delle colonne mostrano sia le dimensioni di autore che quelle calcolate: 1fr - 96,66 px e 2fr - 193,32 px.

Le etichette delle righe delle righe mostrano solo le dimensioni calcolate: 80 px e 80 px, poiché non sono definite dimensioni delle righe nel foglio di stile.

Mostra nomi delle aree

Per visualizzare i nomi delle aree, seleziona la casella di controllo Mostra nomi delle aree. In questo esempio, la griglia include tre aree: top, bottom1 e bottom2.

Estendi linee della griglia

Attiva la casella di controllo Estendi linee della griglia per estendere le linee della griglia fino al bordo dell'area visibile lungo ciascun asse.

Overlay griglia

La sezione Overlay griglia contiene un elenco di griglie presenti nella pagina, ciascuna con una casella di controllo, insieme a varie opzioni.

Attiva la visualizzazione overlay di più griglie

Puoi attivare la visualizzazione overlay di più griglie. In questo esempio, sono presenti due overlay a griglia abilitati: main e div.snack-box, rappresentati ciascuno con colori diversi.

Personalizzare il colore dell'overlay della griglia

Puoi personalizzare ogni colore di overlay della griglia facendo clic sul selettore colori.

Evidenzia la griglia

Fai clic sull'icona di evidenziazione per evidenziare subito l'elemento HTML, scorri fino all'elemento HTML nella pagina e selezionalo nel riquadro Elementi.