1. Introduzione
DevTools ora offre un supporto migliore per il debug con griglie CSS.
Quando vengono applicati display: grid o display: inline-grid a un elemento HTML della tua pagina, il riquadro Elementi offre una serie di opzioni che ti consentono di controllare meglio la griglia.
Cosa scoprirai
Questo codelab ti insegna come eseguire il debug della griglia CSS con Chrome DevTools.
- Come attivare o disattivare la funzionalità di debug della griglia dal riquadro Elementi
- Come personalizzare le impostazioni dell'overlay della griglia nel riquadro Layout
- Come modificare gli stili con gli overlay della griglia
Che cosa ti serve
- Un computer funzionante e un Wi-Fi realistico
- Chrome 87 e versioni successive.
- (Facoltativo) Una conoscenza di base della Griglia di CSS.
Cosa dovrai fare
Risolvi questo rompicapo con l'aiuto degli strumenti di debbuging di CSS Grid.
2. Inizia
Fai clic sul seguente link per aprire la pagina del puzzle:
Quindi, nella pagina del puzzle, apri Chrome DevTools.
3. Attiva l'overlay della griglia
Esamina il puzzle nel riquadro Elementi. Fai clic sul nodo del contenitore di puzzle e imposta lo stato attivo:
<div class="chrome-puzzle">
Nel riquadro Elementi, accanto al contenitore del puzzle è presente un badge grid. Fai clic sull'opzione per attivare/disattivare l'overlay della griglia.
Questo video mostra come completare i passaggi precedenti.
4. Personalizza la visualizzazione della griglia in overlay
Al momento, l'overlay della griglia viene visualizzato con i numeri delle linee. Personalizza il display in modo da aiutarci a risolvere il nostro rompicapo.
Fai clic sul riquadro Layout, seleziona Nascondi etichette riga nel menu a discesa per nascondere i numeri di riga sull'overlay della griglia.
Ora, vai al riquadro Stili, esamina il CSS del contenitore del puzzle. Contiene una proprietà grid-template-areas:
.chrome-puzzle {
grid-template-areas:
"top-left top-right"
"bottom-left bottom-right";
}
I nomi delle aree sono utili per risolvere il rompicapo! Aggiorniamo le impostazioni per visualizzarle sullo schermo.
Torna al riquadro Layout e attiva la casella di controllo Mostra nomi delle aree.
Ta-da! L'overlay della griglia ora mostra i nomi delle aree di ciascun elemento del puzzle.
Questo video mostra come completare i passaggi precedenti.
5. Risolvi il rompicapo
Con i nomi delle aree visualizzati sullo schermo, possiamo iniziare a lavorare sul rompicapo.
Posiziona ogni pezzo del rompicapo nell'area corretta.
Possiamo iniziare controllando il primo pezzo del rompicapo.
<img src="...-grid-4.png" class="piece-4">
Nel riquadro Stili, individua la classe CSS del componente:
.piece-4 {
grid-area: auto;
}
Il valore grid-area è attualmente impostato su auto. Puoi aggiornarlo con il nome corretto dell'area.
A quale area dovrebbe appartenere questo articolo? Supponiamo che l'area corretta di questo elemento sia top-right e che tu possa sostituire il valore auto con top-right. Visualizza subito le modifiche. L'opera si trova ora nell'area di top-right.
Questo video mostra come completare i passaggi precedenti.
Aggiorna il grid-area di ogni pezzo finché non risolvi il rompicapo!
6. Complimenti!
Complimenti! Hai completato questo codelab!
Ecco la documentazione se vuoi saperne di più sugli strumenti di debug della griglia CSS.