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