📐

📐 CSS Grid Generator — Layout Grid Visual

Buat layout CSS Grid secara visual. Atur jumlah kolom & baris, gap, alignment, dan ukuran. Generate kode CSS grid siap pakai dengan live preview interaktif.

🎯 Visual🆓 Gratis🚫 Tanpa Login📋 Copy CSS🔒 100% Privat
💡 CSS Grid: sistem layout 2-dimensi paling powerful di CSS. grid-template-columns: repeat(3, 1fr) = 3 kolom sama lebar. Cocok untuk layout halaman, card grid, dashboard, dan galeri. Tools ini membantu visualisasi sebelum coding.
CSS:

    





    

        
📖 Cara Menggunakan CSS Grid Generator

        

                        

                
1

                Atur Kolom & Baris
                
Jumlah kolom dan baris — langsung terlihat di preview.

            

                        

                
2

                Atur Gap
                
Column gap dan row gap — jarak antar cell.

            

                        

                
3

                Pilih Column Size
                
Equal (1fr), auto-fit, fixed, atau minmax.

            

                        

                
4

                Salin CSS
                
Copy kode CSS grid siap pakai.

            

                    

    

        

        
💡 Tips CSS Grid

        

                        

                🎯                fr Unit
                1fr = 1 fraksi ruang tersisa. repeat(3, 1fr) = 3 kolom sama lebar. Lebih fleksibel dari persen.            

                        

                📊                Auto-fit vs Auto-fill
                Auto-fit: kolom collapse jika kosong. Auto-fill: kolom tetap ada meski kosong.            

                    

    

        

        
🔗 Coba Juga Tools Lain

        
Tools ini cocok dipadukan dengan kalkulator lainnya:

        

                        
                📦
                Box Shadow
Bayangan
            
                        
                🌈
                Gradient Gen
Buat gradien
            
                    

    

        

        
🔗 Alat Terkait yang Mungkin Anda Butuhkan

        

                        
                🪟 Glassmorphism Generator            
                        
                🎨 CSS Gradient Generator            
                        
                🌊 Tailwind to CSS Converter            
                        
                🔲 Border Radius Generator            
                        
                📦 CSS Box Shadow Generator            
                        
                🎨 Color Palette Generator            
                    

    

        
    

        

        

        
        
                    

    

        🕐 Terakhir diperbarui: 30 Mei 2026 · Dibuat oleh dwik.web.id · Syarat & Ketentuan
    

    
    
        
    
    
        
    
    
    
    
    

    
    

    
    
    
    
    
    
    
    
    
    

    
    

    
    

        

            
🔖 Daftar Bacaan