Panduan ini menunjukkan cara menemukan petak CSS di halaman, memeriksanya, dan men-debug masalah tata letak di panel Elements pada Chrome DevTools.
Contoh yang ditampilkan di screenshot yang muncul dalam artikel ini adalah dari dua halaman web berikut: Kotak buah dan Kotak camilan.
Menemukan petak CSS
Jika elemen HTML di halaman Anda menerapkan display: grid atau display: inline-grid, Anda
dapat melihat badge grid di sampingnya pada panel Elemen.
Klik badge tersebut untuk mengubah tampilan overlay petak pada halaman. Overlay muncul di atas elemen, ditata seperti petak untuk menunjukkan posisi garis petak dan treknya:
Buka panel Tata Letak. Jika petak disertakan di halaman, panel Tata Letak akan menyertakan bagian Petak yang berisi sejumlah opsi untuk melihat petak tersebut.
Menyelaraskan item petak dan kontennya dengan Grid Editor
Anda dapat menyelaraskan item petak dan kontennya dengan mengklik tombol, alih-alih mengetik aturan CSS.
Untuk menyelaraskan item petak dan kontennya:
Di panel Elements > Styles, klik tombol
Grid Editor di samping display: grid.
Di Grid Editor, klik tombol yang sesuai untuk menetapkan properti CSS
align-*danjustify-*untuk item petak dan kontennya.
Amati item petak dan konten 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.
- Show line numbers: Menampilkan nomor baris untuk setiap overlay petak (dipilih secara default).
- Show line names: Menampilkan nama baris untuk setiap overlay petak dalam kasus petak dengan nama baris.
b. Kotak centang dengan opsi di dalamnya:
- Tampilkan ukuran trek: Alihkan untuk menampilkan atau menyembunyikan ukuran trek.
- Show area names: Alihkan untuk menampilkan atau menyembunyikan nama area, dalam kasus petak dengan area petak bernama.
- Memperluas garis petak: Secara default, garis petak hanya ditampilkan di dalam elemen dengan
display: gridataudisplay: inline-gridditetapkan di atasnya; saat mengaktifkan opsi ini, garis petak akan meluas ke tepi area pandang 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 baris
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 right.
Dalam demo ini, elemen oranye membentang dari kiri ke kanan, dengan CSS grid-column: left / right.
Menampilkan nama baris akan memudahkan Anda memvisualisasikan posisi awal dan akhir elemen.
Tampilkan ukuran jalur
Aktifkan kotak centang Tampilkan ukuran jalur untuk melihat ukuran jalur dalam petak.
DevTools akan menampilkan [authored size] - [computed size] di setiap label baris: Ukuran Authored: Ukuran
yang ditentukan dalam stylesheet (dihapus jika tidak ditentukan). Ukuran yang dihitung: Ukuran sebenarnya di layar.
Dalam demo ini, ukuran kolom snack-box ditentukan dalam grid-template-columns:1fr 2fr; CSS.
Oleh karena itu, label baris kolom menunjukkan ukuran yang ditulis dan dikomputasi: 1fr - 96.66px dan
2fr - 193.32px.
Label baris 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.
Memperluas 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 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.
Menandai petak
Klik ikon sorotan untuk langsung menandai elemen HTML, scroll ke elemen tersebut di halaman, dan pilih di panel Elemen.
