Memeriksa tata letak petak CSS

Jecelyn Yeen

Sofia Emelianova

Panduan ini menunjukkan cara menemukan petak CSS di halaman, memeriksanya, dan men-debug masalah tata letak di panel Elements di Chrome DevTools.

Contoh yang ditampilkan pada screenshot yang muncul di artikel ini berasal dari dua halaman web berikut: Kotak buah dan Kotak camilan.

Menemukan petak CSS

Saat elemen HTML di halaman Anda menerapkan display: grid atau display: inline-grid, Anda dapat melihat badge grid di sampingnya di panel Elemen.

Klik badge untuk mengubah tampilan overlay petak di halaman. Overlay muncul di atas elemen, yang ditata seperti petak untuk menampilkan posisi garis petak dan jalurnya:

Catatan: Anda juga dapat mengalihkan overlay subgrid dengan badge subgrid.

Buka panel Layout. Saat petak disertakan di halaman, panel Tata Letak akan menyertakan bagian Petak yang berisi sejumlah opsi untuk melihat petak tersebut.

Sejajarkan item petak dan kontennya dengan Editor Petak

Anda dapat menyelaraskan item petak dan kontennya dengan mengklik tombol, tanpa perlu mengetik aturan CSS.

Untuk menyelaraskan item petak dan kontennya:

1. Di panel Elements > Styles, klik tombol Grid Editor di samping display: grid.

   

2. Di Grid Editor, klik tombol yang sesuai untuk menetapkan properti CSS align-* dan justify-* untuk item petak dan kontennya.

   

3. Amati konten dan item petak yang disesuaikan di area pandang.

Opsi tampilan petak

Bagian Grid di panel Tata Letak berisi 2 subbagian:

• Setelan tampilan overlay
• Overlay petak

Mari kita lihat masing-masing sub-bagian ini secara rinci.

Setelan tampilan overlay

Setelan tampilan overlay terdiri dari dua bagian:

a. Menu drop-down dengan opsi berikut:

• Sembunyikan label garis: Menyembunyikan label garis untuk setiap overlay petak.
• Tampilkan nomor baris: Menampilkan nomor baris untuk setiap overlay petak (dipilih secara default).
• Tampilkan nama baris: Menampilkan nama garis untuk setiap overlay petak jika petak dengan nama baris.

b. Kotak centang dengan opsi:

• Tampilkan ukuran trek: Alihkan untuk menampilkan atau menyembunyikan ukuran trek.
• Tampilkan nama area: Klik tombol untuk menampilkan atau menyembunyikan nama area, jika petak dengan area petak bernama.
• Memperluas garis petak: Secara default, garis petak hanya ditampilkan di dalam elemen dengan display: grid atau display: inline-grid yang disetel; jika mengaktifkan opsi ini, garis petak akan diperluas ke tepi area tampilan di sepanjang setiap sumbu.

Mari kita pelajari setelan ini secara lebih mendetail.

Tampilkan nomor baris

Secara default, nomor baris positif dan negatif ditampilkan di overlay petak.

Sembunyikan label garis

Pilih Sembunyikan label baris untuk menyembunyikan nomor baris.

Tampilkan nama baris

Anda dapat memilih Tampilkan nama baris untuk melihat nama baris, bukan angka. Dalam contoh ini, kita memiliki empat baris dengan nama: left, middle1, middle2, dan kanan.

Dalam demo ini, elemen oranye dibentangkan dari kiri ke kanan, dengan CSS grid-column: left / right. Menampilkan nama baris akan memudahkan visualisasi posisi awal dan akhir elemen.

Tampilkan ukuran trek

Aktifkan kotak centang Tampilkan ukuran trek untuk melihat ukuran petak.

DevTools akan menampilkan [authored size] - [computed size] di setiap label baris: Ukuran Authored: Ukuran yang ditentukan di stylesheet (dihapus jika tidak ditentukan). Ukuran Dihitung: Ukuran sebenarnya di layar.

Dalam demo ini, ukuran kolom snack-box ditentukan di grid-template-columns:1fr 2fr; CSS. Oleh karena itu, label baris kolom menunjukkan ukuran yang ditulis dan dihitung: 1fr - 96,66 px dan 2fr - 193,32 px.

Label garis baris hanya menampilkan ukuran yang dihitung: 80px dan 80px karena tidak ada ukuran baris yang ditentukan di stylesheet.

Tampilkan nama area

Untuk melihat nama area, aktifkan kotak centang Tampilkan nama area. Dalam contoh ini, ada tiga area dalam petak - top, bottom1, dan bottom2.

Perluas garis petak

Aktifkan kotak centang Perluas garis petak untuk memperluas garis petak ke tepi area pandang di sepanjang setiap sumbu.

Overlay petak

Bagian Overlay petak berisi daftar petak yang ada di halaman, masing-masing dengan kotak centang, beserta berbagai opsi.

Mengaktifkan tampilan overlay untuk beberapa petak

Anda dapat mengaktifkan tampilan overlay dari beberapa petak. Dalam contoh ini, ada dua overlay petak yang diaktifkan - main dan div.snack-box, masing-masing ditampilkan dengan warna berbeda.

Menyesuaikan warna overlay petak

Anda dapat menyesuaikan setiap warna overlay petak dengan mengklik pemilih warna.

Menyoroti petak

Klik ikon sorotan untuk segera menandai elemen HTML, scroll ke elemen tersebut di halaman, dan pilih elemen tersebut di panel Elemen.