Bikin Tata Letak Komponen Web Rapi & Presisi, Bebas Meleset
Tarik garis panduan langsung dari tepi layar, tempelkan otomatis ke batas komponen, dan simpan posisi garis di setiap website tanpa khawatir hilang saat di-reload.
Dashboard Card
Align vertical guide with this card border.
Metrics Panel
Snap horizontal guide across card headers.
Activity Feed
Guides persist automatically across navigation.
Tip: Klik dan geser garis cyan di atas. Rasakan halusnya magnet snapping saat mendekati batas kartu & tombol!
Dibuat Khusus Buat Kamu yang Peduli Kerapian Detail
Semua fitur esensial yang kamu butuhkan untuk mengecek baseline layout, jarak antar komponen, dan kerapian margin responsif.
Penggaris Tepi yang Sinkron
Ruler atas & kiri berbasis canvas dengan skala piksel presisi (10px, 50px, 100px) yang otomatis bergerak mengikuti posisi scroll halamanmu.
Gestur Tarik & Hapus Alami
Tarik dari ruler atas untuk garis horizontal, atau ruler kiri untuk vertikal. Mau hapus? Cukup seret garisnya balik ke ruler—persis seperti di Figma atau Photoshop.
Magnet Snapping ke Komponen DOM
Tahan tombol Shift selagi menggeser garis agar otomatis menempel (snap) ke tepi, sudut, atau titik tengah elemen UI secara presisi.
Tersimpan Aman Tiap Domain
Semua garis disimpan rapi di browser untuk tiap website (termasuk localhost). Web di-refresh atau pindah rute? Garis tetap setia di tempatnya.
Mode Halaman & Viewport
Fleksibel sesuai kebutuhan: biarkan garis menempel di elemen web saat di-scroll (Page Mode), atau kunci posisinya diam di layar monitor (Viewport Mode).
Bebas Rusak (Shadow DOM Murni)
Berjalan di dalam Shadow Root terisolasi dengan reset CSS penuh. Style Gridy dijamin tidak akan bocor ke web kamu, dan CSS web kamu juga tidak akan merusak Gridy.
Cara Pakai Gridy dalam 4 Langkah Singkat
Pasang Ekstensi
Tambahkan ke Chrome langsung dari Chrome Web Store. Tanpa registrasi akun, langsung siap pakai.
Buka Web Proyekmu
Buka proyek frontend kamu di browser, baik itu di localhost:3000, server staging, maupun website live.
Tarik Garis Panduan
Klik dan seret garis dari ruler atas atau kiri ke posisi komponen yang ingin kamu cek kerapiannya.
Tahan Shift Buat Snap
Kunci garis tepat di pinggir card, tombol, atau container untuk memastikan semuanya benar-benar sejajar.
Shortcut Keyboard Cepat
Tekan Alt + G untuk memunculkan atau menyembunyikan garis panduan kapan saja.
Siap Bikin Web Kamu Lebih Rapi & Presisi?
Gratis, open source, dan dibuat untuk developer yang nggak mau berkompromi soal kualitas tampilan.