CSS Grid Layout Generator

Design complex grid layouts visually and get clean CSS in real time.

Drag on the canvas to add items · Drag items to move · Drag edges to resize · Browse presets.

Start Building Browse Presets
Grid Settings
Columns 3
Rows 3
Gap 16px
Row Height 140px

Drag on the canvas to add items
Click an item to inspect it

Drag on empty space to place items · Drag items to move · Drag edges/corners to resize · Del to delete selected

Generated Code

        
      


      

        
Import / Export

        

          
          
        

        
      


      

        
Browser Support

        

          
Chrome 57+

          
Firefox 52+

          
Safari 10.1+

          
Edge 16+

        

      


    


  


  
  

    

      

        
Layout Presets

        
Click any layout to load it into the editor above.

      

      

    

  


  
  

    

      

        
Frequently Asked Questions

        
Everything you need to know about CSS Grid Layout.

      

      

        

          
What is CSS Grid Layout?

          

            
CSS Grid is a two-dimensional layout system for placing elements in rows and columns simultaneously. Use grid-template-columns and grid-template-rows to define the structure, then position items with grid-column and grid-row.

          

        

        

          
How do I make a grid item span multiple columns?

          

            
Use grid-column: 1 / 4 to span from line 1 to line 4 (3 columns wide), or grid-column: span 3 for a relative span. Apply the same syntax to rows with grid-row. Grid line numbers start at 1 for the first edge.

          

        

        

          
What is the difference between CSS Grid and Flexbox?

          

            
Grid is two-dimensional — it controls rows and columns simultaneously. Flexbox is one-dimensional — either a row or a column. Use Grid for full-page and complex component layouts; use Flexbox for aligning items within a single row or column.

          

        

        

          
What does the fr unit mean in CSS Grid?

          

            
fr is the fractional unit — it takes one fraction of available grid space after fixed values are placed. grid-template-columns: 1fr 2fr 1fr creates three columns where the middle is twice the width of the others.