Pemeriksa Tata Letak untuk Flexbox dan Grid
Visualisasikan jalur flex dan grid, celah, serta perataan item menggunakan lapisan pemeriksa tata letak Chrome.
Pemeriksa Tata Letak untuk Flexbox dan Grid adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Lencana Flexbox di DevTools
Chrome DevTools menandai kontainer Flexbox dengan lencana “flex” di samping node DOM-nya pada panel Elemen. Mengeklik lencana tersebut akan mengaktifkan atau menonaktifkan lapisan Flexbox—garis berwarna yang menunjukkan sumbu utama, sumbu silang, batas item, dan jarak celah.
Lencana dan Lapisan Grid
Kontainer Grid menampilkan lencana “grid”. Mengekliknya akan mengaktifkan atau menonaktifkan lapisan grid: garis berwarna untuk kolom, baris, dan celah. Lapisan persisten (disematkan di panel Tata Letak) tetap terlihat saat Anda menggulir atau mengubah ukuran area pandang.
Panel Tata Letak
DevTools → Elemen → tab Tata Letak mencantumkan semua kontainer flex dan grid di halaman. Mengeklik nama kontainer akan memilihnya di DOM dan mengaktifkan atau menonaktifkan lapisannya. Tampilan lapisan (warna garis, visibilitas label, ukuran jalur) dapat dikonfigurasi di sini.
Ukuran Jalur Grid
Lapisan menampilkan nama dan ukuran jalur saat “Tampilkan ukuran jalur” diaktifkan. Ukuran intrinsik (auto, min-content, max-content) dan unit pecahan (fr) menampilkan nilai piksel hasil resolusinya—mengungkap cara unit fr membagi ruang yang tersedia.
Inspeksi Item Flexbox
Pilih item flex (anak dari kontainer flex). Panel Gaya menampilkan perluasan singkatan flex — flex-grow, flex-shrink, dan flex-basis. Hamparan menyoroti ukuran item pada sumbu utama, basisnya, serta pertumbuhan atau penyusutan yang diterapkan.
Area Grid Bernama
Kontainer grid dengan grid-template-areas menampilkan hamparan area bernama. Setiap wilayah bernama diberi label dan kode warna. Visualisasi ini memudahkan Anda memverifikasi bahwa penetapan grid-area sesuai dengan templat tata letak yang diinginkan.
Inspeksi Subgrid
Dukungan subgrid di DevTools menandai kontainer subgrid secara khusus. Garis jalurnya sejajar dengan jalur grid induk — hamparan menampilkan perataan ini secara visual, yang mengonfirmasi bahwa item subgrid berpartisipasi dalam sistem koordinat grid induk.
Men-debug Perataan
Item yang tidak sejajar sering kali disebabkan oleh nilai justify-content, align-items, atau align-self yang salah. Hamparan flex/grid menampilkan posisi item relatif terhadap garis sumbu. Coba ubah properti perataan di panel Gaya dan amati perubahan hamparan secara langsung.
Visualisasi Jarak
Hamparan menampilkan jarak sebagai pita berwarna di antara item. Hal ini memudahkan Anda memastikan nilai gap dan mengidentifikasi apakah jarak berasal dari gap (benar) atau margin (yang mungkin terlipat secara tak terduga pada baris flex).
Grid Implisit vs Eksplisit
Hamparan grid membedakan jalur implisit (dibuat otomatis untuk item yang meluap) dari jalur eksplisit (ditentukan dalam grid-template). Garis putus-putus menandai jalur implisit. Jika konten membuat jalur implisit yang tidak diharapkan, hamparan segera menampilkan pola luapannya.
Men-debug Tata Letak Responsif
Gabungkan Inspektur Tata Letak dengan Mode Perangkat. Ubah ukuran area pandang dan amati cara pembungkusan flex serta jalur grid auto-fill/auto-fit ditata ulang secara langsung. Cara ini menemukan kerusakan tata letak responsif lebih awal daripada mengubah ukuran jendela peramban secara manual.
Pemeriksaan Pemahaman
Apa yang ditampilkan hamparan grid DevTools yang tidak terlihat pada halaman yang dirender?
Ringkasan
Inspektur Tata Letak Flexbox dan Grid di DevTools memvisualisasikan garis sumbu, ukuran jalur, jarak, area bernama, dan jalur implisit sebagai hamparan interaktif. Jika digabungkan dengan panel Tata Letak untuk mengelola hamparan, fitur ini membuat proses men-debug tata letak CSS yang kompleks lebih cepat dan intuitif daripada hanya membaca CSS.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pemeriksa Tata Letak untuk Flexbox dan Grid” gratis?
Ya — teks lengkap “Pemeriksa Tata Letak untuk Flexbox dan Grid” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Pemeriksa Tata Letak untuk Flexbox dan Grid”?
Visualisasikan jalur flex dan grid, celah, serta perataan item menggunakan lapisan pemeriksa tata letak Chrome. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Pemeriksa Tata Letak untuk Flexbox dan Grid” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Gaya Terhitung dan Pemeriksa Model Kotak
- Pemeriksa Tata Letak untuk Flexbox dan Grid
- Panel Ikhtisar CSS
- Penyahikutan Animasi dan Transisi