Questa guida mostra come individuare le griglie CSS in una pagina, esaminarle ed eseguire il debug dei problemi di layout nel riquadro Elementi di Chrome DevTools.
Gli esempi mostrati negli screenshot riportati in questo articolo provengono da queste due pagine web: Frutta e Spuntino.
Scopri le griglie CSS
Quando a un elemento HTML della pagina è applicato l'elemento display: grid o display: inline-grid, puoi vedere un badge grid accanto all'elemento nel riquadro Elementi.
Fai clic sul badge per attivare o disattivare la visualizzazione di un overlay griglia sulla pagina. L'overlay viene visualizzato sopra l'elemento, disposto 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 di queste griglie.
Allineare gli elementi della griglia e i relativi contenuti con l'editor griglia
Puoi allineare gli elementi della griglia e i relativi contenuti con un semplice clic su un pulsante, anziché digitare regole CSS.
Per allineare gli elementi della griglia e i relativi contenuti:
Nel riquadro Elementi > Stili, fai clic sul pulsante
Editor griglia accanto a display: grid.
Nell'editor griglia, fai clic sui pulsanti corrispondenti per impostare le proprietà CSS
align-*ejustify-*per gli elementi della griglia e i relativi contenuti.
Osserva gli elementi e i contenuti della griglia modificati nell'area visibile.
Opzioni di visualizzazione griglia
La sezione Griglia nel riquadro Layout contiene due sottosezioni:
- Impostazioni di visualizzazione in overlay
- Overlay griglia
Esaminiamo nel dettaglio ognuna di queste sottosezioni.
Impostazioni di visualizzazione in overlay
Le impostazioni di visualizzazione in overlay sono composte da due parti:
a. Un menu a discesa con le seguenti opzioni:
- Nascondi etichette delle linee: nascondi le etichette delle linee per l'overlay della griglia.
- Mostra numeri di righe: mostra i numeri delle righe per ogni overlay della griglia (opzione selezionata per impostazione predefinita).
- Mostra nomi linee: mostra i nomi delle linee di ciascun overlay della griglia nel caso di griglie con nomi di linee.
b. Caselle di controllo con opzioni incluse:
- Mostra dimensioni tracce: attiva/disattiva 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: gridodisplay: inline-gridimpostato; se attivi questa opzione, le linee della griglia si estendono fino al bordo dell'area visibile lungo ciascun asse.
Esaminiamo queste impostazioni in maggiore dettaglio.
Mostra numeri delle righe
Per impostazione predefinita, i numeri di riga positivo e negativo vengono visualizzati sull'overlay della griglia.
Nascondi etichette delle linee
Seleziona Nascondi etichette delle linee per nascondere i numeri delle righe.
Mostra nomi delle linee
Puoi selezionare Mostra nomi delle linee per visualizzare i nomi delle linee anziché i numeri. In questo esempio abbiamo quattro righe con i nomi: left, middle1, middle2 e right.
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
Attiva la casella di controllo Mostra dimensioni traccia per visualizzare le dimensioni delle tracce della griglia.
DevTools mostrerà [authored size] - [computed size] in ogni etichetta: Dimensione creata: la dimensione definita nel foglio di stile (omessa se non definita). Dimensioni elaborate: le dimensioni effettive dello schermo.
In questa demo, le dimensioni delle colonne snack-box sono definite nel CSS grid-template-columns:1fr 2fr;.
Pertanto, le etichette delle righe della colonna mostrano sia le dimensioni di creazione che quelle calcolate: 1fr - 96,66 px e 2 fr - 193,32 px.
Le etichette delle righe di riga mostrano solo le dimensioni calcolate: 80px e 80px poiché non sono state definite dimensioni delle righe nel foglio di stile.
Mostra nomi delle aree
Per visualizzare i nomi delle aree, attiva la casella di controllo Mostra nomi delle aree. In questo esempio sono presenti tre aree nella griglia: 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 e varie opzioni.
Attiva visualizzazioni overlay di più griglie
Puoi attivare la visualizzazione overlay di più griglie. In questo esempio sono attivi due overlay griglia:
main e div.snack-box, ciascuno rappresentato con colori diversi.
Personalizzare il colore di overlay della griglia
Puoi personalizzare ciascun colore della sovrapposizione della griglia facendo clic sul selettore colori.
Evidenzia la griglia
Fai clic sull'icona di evidenziazione per evidenziare subito l'elemento HTML, scorri fino a farlo nella pagina e selezionalo nel riquadro Elementi.
