{ CSS Grid Generator }

// build CSS Grid layouts visually

Build CSS Grid layouts visually. Drag to span cells, set columns, rows and gaps, then copy the generated CSS and HTML instantly — browser-based, free, no sign-up.

// GRID SETTINGS
// COLUMN TRACKS
// ROW TRACKS
// GAP
px
px
// PRESETS
// OPTIONS
// GRID PREVIEW — drag to span cells Click and drag across cells to create an area
// CONTAINER 

      


      
      

        

          // CHILDREN
          
        

        

      


      
      

        

          // HTML SNIPPET
          
        

        

      


    


  







  

    

      
HOW TO USE

      
    
        
  1. 01
    Set columns and rows
    Use the + / − buttons to choose how many columns and rows your grid has. Adjust column and row track sizes individually using the track inputs.
    2. 
        
  2. 02
    Drag to span areas
    Click and drag across multiple cells in the preview canvas to create a named grid area. Each area gets a colour and label automatically.
    3. 
        
  3. 03
    Copy the CSS
    The Container CSS, Children CSS, and HTML tabs update instantly. Copy whichever output you need and paste it directly into your project.
    4. 
      

    

    

      
FEATURES

      

        Drag to span
        Named areas
        Track editor
        Presets
        Live CSS output
        HTML snippet
      

      
USE CASES

      
    
        
  • ⊞ Design page layouts with header, sidebar, footer
    • 
        
  • ⊞ Build dashboard grids with custom area sizes
    • 
        
  • ⊞ Generate card grids with equal columns
    • 
        
  • ⊞ Prototype responsive layouts before coding
    • 
        
  • ⊞ Learn CSS Grid by seeing live property output
    • 
      

    

    

      
WHAT IS THIS?

      
CSS Grid Generator is a visual layout tool that lets you design CSS Grid layouts by dragging and spanning cells. It generates the complete grid-template-columns, grid-template-rows, gap, and grid-template-areas CSS — plus matching child element selectors and a ready-to-use HTML snippet.

      
RELATED TOOLS

      

        ✦ CSS Beautifier
        ⚡ CSS Minifier
        ✔ CSS Validator
        🎨 Color Converter
        🔘 CSS Button Gen
      

    

  







  

    
FREQUENTLY ASKED QUESTIONS

    

      

        

          What are named grid areas?
          
Named grid areas are labels assigned to rectangular sections of a CSS Grid using the grid-template-areas property. Each child element can then be placed into a named area using grid-area: name. This approach makes complex layouts easier to read and maintain compared to using grid-column and grid-row line numbers directly.

        

        

          What track size values can I enter?
          
Each column and row track accepts any valid CSS length: 1fr for flexible fractions, 200px for fixed widths, auto to size from content, minmax(100px, 1fr) for responsive ranges, or percentage values. The generated CSS uses exactly what you type, so any valid CSS track sizing function works.

        

        

          How do I create a responsive grid?
          
Enable the "Add responsive breakpoint" option to append a @media (max-width: 768px) rule that collapses the grid to a single column. For more sophisticated responsive behaviour, use auto-fill or auto-fit with minmax() in your track definitions — this lets the browser automatically fit as many columns as possible.

        

      

      

        

          What does the "fr" unit mean?
          
The fr unit stands for "fraction" and represents a share of the available space in the grid container after fixed and intrinsic tracks are sized. For example, 1fr 2fr 1fr creates three columns where the middle column is twice as wide as each outer column. fr units are only valid in CSS Grid track definitions.

        

        

          Can I create overlapping grid areas?
          
This visual builder creates non-overlapping rectangular areas. To create overlapping elements in CSS Grid, you would place multiple children into the same grid lines or area using explicit grid-column and grid-row values and control stacking order with z-index. That workflow is better suited to hand-coding after using this tool for the base layout.

        

        

          What is the Holy Grail layout preset?
          
The Holy Grail layout is a classic web layout pattern with a full-width header, a full-width footer, and a three-column middle section containing a main content area flanked by two sidebars. It was famously difficult to achieve with older CSS techniques and is straightforward with CSS Grid.

        

      

    

  







  

    
CSS Grid Generator — Visual Layout Builder Free Online

    
CSS Grid is the most powerful layout system in CSS, but writing grid-template-columns, grid-template-rows, and grid-template-areas by hand for complex layouts requires a lot of trial and error. This visual CSS Grid Generator lets you design layouts interactively — drag to span cells, adjust track sizes, and get the complete CSS output instantly.


    
How CSS Grid Works

    
A CSS Grid container creates a two-dimensional layout context defined by columns and rows — collectively called tracks. Child elements are placed into this track system either automatically (following document order) or explicitly by assigning grid lines or named areas. The gap between tracks is set with the gap, column-gap, and row-gap properties.

    
Named grid areas, defined with grid-template-areas, are one of the most readable features of CSS Grid. Instead of tracking column and row line numbers, you write a visual ASCII-art representation of your layout directly in CSS — each string represents one row, and the words within it represent the area names that fill each cell. Child elements are then placed into areas by name using grid-area.


    
Track Sizing with fr Units

    
The fr unit is central to flexible CSS Grid layouts. It distributes the remaining space in the grid container after fixed-size tracks are placed. A three-column layout with 1fr 3fr 1fr gives the middle column three times the space of each sidebar. Combining fr with minmax() creates tracks that have a minimum size but grow to fill available space, enabling layouts that behave correctly at any container width.


    
Preset Layouts

    
The Holy Grail layout has a full-width header and footer wrapping a three-column main area. The Dashboard preset creates an asymmetric layout with a sidebar and main area divided into panels. The Card Grid preset creates equal columns suitable for product listings, blog posts, or team member cards. The Sidebar preset creates a fixed-width sidebar with a flexible main content area. Each preset applies a complete grid configuration including named areas and appropriate track sizes.


    
Generated CSS Output

    
The tool generates three outputs. The Container CSS contains the .grid-container rule with display: grid, all track definitions, gap values, and the grid-template-areas string if named areas are enabled. The Children CSS contains one rule per named area, each using grid-area: name to place the child. The HTML tab provides a ready-to-use snippet with all the necessary class names applied.

  







☕