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:
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 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: gridodisplay: inline-gridimpostato; 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.
