Tips DevTools: Cara memeriksa petak CSS

Sarah Emelianova
Sofia Emelianova

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:

Overlay petak.

  • 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.

Grid Editor.

Untuk pengalaman belajar langsung, ikuti tutorial Memeriksa Petak CSS.