Sofia Emelianova
Chrome DevTools rende intuitivo il debug dei layout a griglia CSS con una varietà di opzioni di visualizzazione.
Guarda il video per scoprire come attivare/disattivare l'overlay della griglia nel riquadro Elementi e utilizzarlo per:
- Visualizza e controlla i layout a griglia.
- Visualizza i numeri di riga e colonna a cui fare riferimento per il posizionamento degli elementi della griglia.
- Usa i nomi delle linee e delle aree e visualizzali sull'overlay se ci sono molti elementi della griglia e i numeri sono poco chiari.
- Controlla le dimensioni delle tracce.
Inoltre, con l'Editor griglia disponibile nel riquadro Elementi > Stili, puoi allineare gli elementi e i relativi contenuti in un layout a griglia con un clic su un pulsante anziché digitare regole CSS.
Per un'esperienza di apprendimento più pratica, segui il tutorial Ispeziona la griglia CSS.