Chrome DevTools membuat proses debug tata letak petak CSS menjadi intuitif dengan berbagai opsi visualisasi.
Tonton video untuk mempelajari cara mengalihkan overlay petak di panel Elemen dan menggunakannya untuk:
- Memvisualisasikan dan memeriksa tata letak petak.
- Lihat nomor baris dan kolom yang akan dirujuk saat menempatkan item petak.
- Gunakan nama baris dan area dan lihat keduanya 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 sekali klik tombol, tanpa perlu mengetik aturan CSS.
Untuk pengalaman belajar langsung, ikuti tutorial Memeriksa Petak CSS.