Paparan Grid dalam Debugger Pelayar

Apabila bekerja dengan grid semasa proses pembuatan laman web, kadangkala perlu untuk menyemak sama ada penempatan elemen dalam grid berlaku dengan betul. Selain itu, jika terdapat kesilapan kita perlu memastikan elemen mana yang menyebabkan penempatan yang salah. Untuk tujuan ini, kita boleh menggunakan debugger dalam pelayar.

Mari kita lihat grid menggunakan contoh debugger dalam pelayar Chrome. Pertama, pilih objek yang kita minati yang mempunyai grid dan klik kanan tetikus lalu pilih dari senarai pilihan 'Inspect':

Sekarang di panel pelayar yang terbuka di sebelah kanan, arahkan kursor ke objek kami dengan grid dan perhatikan bahawa di baris bersebelahan elemen induk terdapat tompok grid:

Selepas menekan tombol grid, kita akan melihat bahawa objek kami dipaparkan dalam sistem grid yang visual dan mudah difahami, dengan penomboran semua lajur dan baris ditunjukkan:

Sekarang perhatikan panel dalam debugger. Di dalamnya terdapat tab Styles, Computed, Layout dan lain-lain. Tukar dari tab Styles, yang aktif secara lalai, ke tab Layout. Anda akan melihat senarai tetapan grid anda:

Mari kita pilih untuk paparan pilihan pertama Show track sizes, yang menunjukkan saiz trek:

Dengan pilihan Show area names kita boleh memaparkan nama kawasan grid, jika ia ditetapkan. Dan dengan memilih pilihan Extend grid lines kita akan melihat garisan trek yang dipanjangkan melebihi rangka grid: