Questa guida mostra come trovare le griglie CSS in una pagina, esaminarle e risolvere i problemi di layout nel riquadro Elementi di Chrome DevTools.
Gli esempi mostrati negli screenshot di questo articolo provengono da queste due pagine web: Frutta e Snack.
Scopri le griglie CSS
Quando a un elemento HTML della pagina viene applicato display: grid o display: inline-grid, accanto al relativo elemento nel riquadro Elementi viene visualizzato un badge grid.
Fai clic sul badge per attivare/disattivare la visualizzazione di un overlay a griglia nella pagina. L'overlay viene visualizzato sopra l'elemento, disposto come una griglia per mostrare la posizione delle linee e dei canali 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 visualizzarle.
Allineare 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 solo clic anziché digitare le regole CSS.
Per allineare gli elementi della griglia e i relativi contenuti:
Nel riquadro Elementi > Stili, fai clic sul pulsante
Editor di griglie accanto a display: grid.
Nell'Editor di griglie, fai clic sui pulsanti corrispondenti per impostare le proprietà CSS
align-*ejustify-*per gli elementi della griglia e i relativi contenuti.
Osserva gli elementi della griglia e i contenuti aggiustati nell'area visibile.
Opzioni di visualizzazione della griglia
La sezione Griglia nel riquadro Layout contiene due sottosezioni:
- Impostazioni di visualizzazione dell'overlay
- Overlay della griglia
Esaminiamo nel dettaglio ciascuna di queste sottosezioni.
Impostazioni di visualizzazione dell'overlay
Le impostazioni di visualizzazione dell'overlay sono costituite da due parti:
a. Un menu a discesa con le seguenti opzioni:
- Nascondi etichette della linea: nascondi le etichette delle linee per ogni sovrapposizione della griglia.
- Mostra numeri di riga: mostra i numeri di riga per ogni overlay della griglia (selezionato per impostazione predefinita).
- Mostra nomi linee: mostra i nomi delle linee per ogni overlay della griglia nel caso di griglie con nomi linee.
b. Caselle di controllo con opzioni al loro interno:
- Mostra le dimensioni della traccia: attiva/disattiva questa opzione per mostrare o nascondere le dimensioni della traccia.
- Mostra nomi delle aree: attiva/disattiva questa opzione 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 visualizzate solo all'interno dell'elemento con
display: gridodisplay: inline-gridimpostato. Se attivi questa opzione, le linee della griglia si estendono fino al bordo del viewport lungo ciascun asse.
Esaminiamo queste impostazioni più nel dettaglio.
Mostrare i numeri di riga
Per impostazione predefinita, i numeri di riga positivi e negativi vengono visualizzati sull'overlay della griglia.
Nascondere le etichette delle righe
Seleziona Nascondi etichette riga per nascondere i numeri di riga.
Mostra nomi 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 right.
In questa demo, l'elemento arancione si estende da sinistra a destra, con CSS grid-column: left / right.
La visualizzazione dei nomi delle righe semplifica la visualizzazione della posizione iniziale e finale dell'elemento.
Mostra le dimensioni della traccia
Attiva la casella di controllo Mostra le dimensioni della traccia per visualizzare le dimensioni della traccia della griglia.
In ogni etichetta di riga, DevTools mostrerà [authored size] - [computed size]: dimensione dell'autore: la dimensione definita nello stile (omessa se non definita). Dimensioni calcolate: le dimensioni effettive sullo schermo.
In questa demo, le dimensioni delle colonne snack-box sono definite nel CSS grid-template-columns:1fr 2fr;.
Pertanto, le etichette delle righe delle colonne mostrano sia le dimensioni create dall'autore sia quelle calcolate: 1fr - 96,66 px e
2fr - 193,32 px.
Le etichette delle righe mostrano solo le dimensioni calcolate: 80px e 80px poiché non sono presenti dimensioni di riga definite nello 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 contiene tre aree: top, bottom1 e bottom2.
Estendere le 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 della griglia
La sezione Overlay della griglia contiene un elenco delle griglie presenti nella pagina, ciascuna con una casella di controllo, oltre a varie opzioni.
Attivare le visualizzazioni in overlay di più griglie
Puoi attivare le visualizzazioni in overlay di più griglie. In questo esempio sono attivati due overlay della griglia:main e div.snack-box, ciascuno rappresentato con colori diversi.
Personalizzare il colore dell'overlay della griglia
Puoi personalizzare il colore di ogni overlay della griglia facendo clic sul selettore colori.
Evidenzia la griglia
Fai clic sull'icona di evidenziazione per evidenziare immediatamente l'elemento HTML, scorri fino a visualizzarlo nella pagina e selezionatelo nel riquadro Elementi.
