Chrome DevTools membuat proses debug tata letak petak CSS menjadi intuitif dengan berbagai opsi visualisasi.
Tonton video untuk mempelajari cara mengaktifkan overlay petak di panel Elemen dan menggunakannya untuk:
- Memvisualisasikan dan memeriksa tata letak petak.
- Lihat nomor baris dan kolom yang akan digunakan saat menempatkan item petak.
- Gunakan nama garis dan area serta lihat nama tersebut di overlay jika Anda memiliki banyak item petak dan angkanya membingungkan.
- Periksa ukuran jalur.
Selain itu, dengan Grid Editor di panel Elements > Styles, Anda dapat meratakan item dan kontennya dalam tata letak petak dengan mengklik tombol, bukan mengetik aturan CSS.
Untuk pengalaman belajar yang lebih praktis, ikuti tutorial Memeriksa Petak CSS.