Deteksi setiap kontainer dan tampilkan struktur sebagai overlay berwarna.
Deteksi setiap kontainer dan tampilkan struktur sebagai overlay berwarna. Alat ini membedah tata letak kompleks secara visual, memudahkan Anda memahami bagaimana ruang didistribusikan dan bagaimana elemen disejajarkan dalam sistem Grid dan Flexbox.
Kontainer Grid menampilkan garis berwarna untuk setiap baris dan kolom. Ukuran track (1fr, auto, 200px) diberi label pada setiap garis. Area celah (gap) disorot dengan pita semi-transparan yang menunjukkan nilai gap dalam piksel. Track implisit dan eksplisit dibedakan melalui garis solid vs putus-putus.
Kontainer Flex menampilkan sumbu utama (main axis) berupa panah (row, row-reverse, column, column-reverse) dan sumbu silang (cross axis) yang tegak lurus dengannya. justify-content dan align-items divisualisasikan dengan indikator penyelarasan berlabel yang menunjukkan bagaimana ruang didistribusikan di antara elemen anak.
Alat ini secara otomatis memindai seluruh halaman dan menemukan setiap elemen dengan display: grid atau display: flex (termasuk varian inline). Penghitung lencana menunjukkan total jumlah yang terdeteksi. Tidak perlu memilih elemen secara manual — semuanya ditemukan dan didaftarkan secara otomatis.
Klik kontainer mana pun untuk melihat properti tata letak lengkapnya: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap, serta semua properti ukuran anak (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Setiap elemen anak di dalam kontainer Grid atau Flex menunjukkan ukuran render aktualnya, nilai flex-grow/shrink, dan penempatan area grid. Lihat dengan tepat berapa banyak ruang yang ditempati setiap elemen anak dan alasannya.
Mendeteksi kontainer Grid dan Flex yang bersarang di dalam kontainer Grid/Flex lainnya. Overlay merender setiap tingkat sarang dengan warna yang berbeda sehingga Anda dapat melihat hierarki tata letak yang lengkap.
Kolom grid lebih lebar atau lebih sempit dari yang diharapkan? Overlay menunjukkan ukuran track yang sebenarnya (1fr diurai menjadi 342px, auto diurai menjadi 156px) sehingga Anda dapat melihat persis bagaimana browser menghitung ukuran tersebut.
Mengapa satu elemen anak flex lebih lebar dari yang lain? Visualisator menunjukkan nilai flex-grow, flex-shrink, dan flex-basis untuk setiap anak, membuat logika distribusi ruang menjadi terlihat jelas.
Ubah ukuran browser dan lihat overlay grid diperbarui secara real-time. Lihat bagaimana grid-template-columns berubah dari "1fr 1fr 1fr" pada desktop menjadi "1fr" pada seluler, dan verifikasi transisinya di setiap breakpoint.
Kunjungi situs web yang dibangun dengan baik dan lihat bagaimana mereka menggunakan tata letak Grid dan Flex dalam produksi. Overlay visual membuat konsep abstrak (unit fr, auto-fit, justify-content) menjadi nyata dan interaktif.
Pastikan semua grid kartu pada sebuah halaman menggunakan jumlah kolom dan nilai gap yang sama. Overlay membuat ketidakkonsistenan langsung terlihat — bagian yang menggunakan gap 20px sementara bagian lain menggunakan 24px akan tampak jelas dalam sekejap.
Buka dok mengambang DevSuite Pro dan klik ikon Visualisator Grid/Flex. Alat akan memindai halaman dan mendeteksi semua kontainer Grid dan Flex.
Setiap kontainer Grid dan Flex mendapatkan overlay bingkai berwarna. Sebuah panel mencantumkan semua kontainer yang terdeteksi beserta tipenya (Grid atau Flex) dan selektor elemennya.
Klik kontainer mana pun untuk melihat properti tata letak lengkapnya. Kontainer Grid menampilkan garis track dan ukuran; kontainer Flex menampilkan arah sumbu dan penyelarasan.
Setiap elemen anak menampilkan ukuran komputasi dan properti spesifik tata letak (flex-grow, grid-area). Pahami bagaimana ruang didistribusikan di antara elemen-elemen anak.
Klik kembali ikon alat untuk menghapus semua overlay dan kembali ke tampilan halaman normal.
Instal DevSuite Pro secara gratis dan buka 64+ alat pengembang untuk browser Anda.
