Esaminare i layout della griglia CSS

Sofia Emelianova
Sofia Emelianova

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.

Griglia Discover

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:

Attiva/disattiva il badge 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.

Riquadro Layout.

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:

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

    Pulsante Editor griglia.

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

    Impostazione delle proprietà CSS.

  3. 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: grid o display: inline-grid impostato. 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.

Mostra i numeri di riga.

Nascondere le etichette delle righe

Seleziona Nascondi etichette riga per nascondere i numeri di riga.

Nascondi le etichette delle righe.

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 i nomi delle righe.

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 le dimensioni della traccia.

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.

Mostra i nomi delle aree.

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.

Estendi le linee della griglia.

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.

Attiva le visualizzazioni in overlay di più griglie.

Personalizzare il colore dell'overlay della griglia

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

Personalizzare il colore dell'overlay della griglia

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.

Evidenzia la griglia