Sofia Emelianova
Chrome DevTools semplifica il debug dei layout a griglia CSS con una serie di opzioni di visualizzazione.
Guarda il video per scoprire come attivare/disattivare l'overlay della griglia nel riquadro Elementi e come utilizzarlo per:
- Visualizza e controlla i layout a griglia.
- Consulta i numeri di riga e colonna a cui fare riferimento quando posizioni gli elementi della griglia.
- Utilizza i nomi di linee e aree e visualizzali sull'overlay se hai molti elementi della griglia e i numeri sono confusi.
- Controlla le dimensioni della traccia.
Inoltre, con l'editor di griglie nel riquadro Elementi > Stili, puoi allineare gli elementi e i relativi contenuti in un layout a griglia con un solo clic anziché digitare le regole CSS.
Per un'esperienza di apprendimento più pratica, segui il tutorial Esaminare la griglia CSS.