Guides JP

CSS Grid Generator

Set columns, rows, gap, and per-track sizes (fr/px/auto) to generate CSS Grid layout code with a real-time preview.

Last updated: 2026/10/16 Design Feedback & bug reports
px
px

Choose a unit (fr / px / auto) and value for each track.

CSS 

            


            

                

                    HTML
                    
                

                

            


        

    




    
    



    
How to Use

    

        

            
1

            

                
Set Columns & Rows

                
Enter the number of columns and rows for your grid. The preview updates instantly.

            

        

        

            
2

            

                
Adjust Track Sizes & Gap

                
Set the size of each column and row (fr / px / auto) and the spacing (gap) between them.

            

        

        

            
3

            

                
Check the Preview

                
See the resulting grid layout in the real-time preview as you adjust settings.

            

        

        

            
4

            

                
Copy CSS & Use

                
Copy the generated CSS (and HTML) with the copy button and paste it straight into your project.

            

        

    






    

        

            
About CSS Grid Generator

            
A visual tool for generating CSS Grid Layout code. Just set the number of columns and rows, per-track sizes, and gap, and it outputs CSS including display: grid; grid-template-columns / grid-template-rows; and gap. All processing happens in your browser and nothing is sent to any server.

        

        

            
Features

            
    
                
  • Real-time PreviewChanges to columns, rows, sizes, and gap are instantly reflected in the preview so you can fine-tune visually.
    • 
                
  • Flexible Track UnitsSet each track to fr (ratio), px (fixed), or auto for full control over complex layouts.
    • 
                
  • CSS + HTML OutputOutputs CSS with grid-template-columns / rows and gap, plus a matching HTML starter.
    • 
                
  • Privacy ProtectedAll processing happens in your browser. Your input is never sent to servers.
    • 
            

        

        

            
Use Cases

            
    
                
  • Card galleries and product listing layouts
    • 
                
  • Dashboard and admin panel grids
    • 
                
  • Prototyping responsive page layouts
    • 
                
  • Learning CSS Grid and grid-template-columns
    • 
                
  • Aligned layouts for forms and galleries
    • 
            

        

    






    
FAQ

    

        
Is the CSS Grid generator free?
Yes, it is completely free. No registration required.

        
What is the difference between fr, px, and auto?
fr (fraction) distributes available space by ratio, px is a fixed pixel width, and auto sizes the track based on its content. For example, 1fr 2fr splits column widths in a 1:2 ratio.

        
Can I use the generated CSS directly?
Yes, use the copy button to copy the CSS to your clipboard and paste it directly into your stylesheet. A matching HTML starter is generated as well.

        
Which browsers support CSS Grid?
All major browsers as of 2026 (Chrome, Firefox, Safari, Edge) fully support CSS Grid Layout. IE11 only supports an older draft, so the modern grid syntax is not available there.

        
Is my input saved anywhere?
No, your input is never sent to or stored on our servers. All processing happens locally in your browser, so you can use it with peace of mind.

    













    
Related Tools

    

                
            
            
                px to vw Converter
                Convert CSS px to vw. Bulk CSS conversion supported
            
        
                
            
            
                px to em/rem Converter
                Convert CSS px to em/rem. Bulk CSS conversion supported
            
        
                
            
            
                Aspect Ratio Calculator
                Calculate simplified aspect ratio from dimensions
            
        
                
            
            
                Line Height Calculator
                Calculate line-height ratio from font size and leading
            
        
                
            
            
                CSS Gradient Generator
                Visually create Linear, Radial & Conic CSS gradients
            
        
            







    
Popular Tools

    

                
            
            
                Character Counter
                Count characters, words, and lines in real-time
            
        
                
            
            
                JSON Formatter
                Format and validate JSON with syntax highlighting
            
        
                
            
            
                QR Code Generator
                Create custom QR codes with logo, colors & styles
            
        
                
            
            
                Password Generator
                Generate secure random passwords with one click
            
        
                
            
            
                Base64 Encoder
                Encode and decode text or files to Base64
            
        
                
            
            
                IP Address Checker
                Check your global IP address
            
        
            







    
Related Guides

    

                
            
                CSS Grid for Beginners: display:grid, the fr Unit, gap, and Responsive Layouts
                Learn CSS Grid from the ground up: how to create a grid with display:grid, grid-template-columns/rows and the fr unit, spacing with gap, placement with grid-template-areas, responsive layouts using repeat, minmax, and auto-fit, and when to use Flexbox instead.
            
        
                
            
                CSS Flexbox for Beginners: Main vs Cross Axis, justify-content, align-items
                Learn CSS Flexbox from the ground up: how display:flex works, the main and cross axes, flex-direction, justify-content, align-items, flex-wrap, the roles of flex-grow/shrink/basis, common layouts like centering and even spacing, and how it differs from Grid.