CSS Grid Generator

Visually build a CSS Grid layout with live preview and copy the generated grid CSS — set columns, rows, track sizes, gaps, and alignment.

Live preview
Generated CSS 

  



    

    

      
The CSS Grid Generator is a free, visual tool for building CSS Grid layouts without writing code by hand. Set the number of columns and rows, choose each track size (fr, px, %, or auto), adjust the row and column gap, and tweak how items align — then watch a live preview grid update in real time. When it looks right, copy the generated display: grid CSS and drop it straight into your stylesheet.

      

        
What is a CSS Grid generator?

        
CSS Grid is a two-dimensional layout system that arranges elements into rows and columns. A CSS Grid generator gives you sliders and selects for the grid properties — grid-template-columns, grid-template-rows, gap, justify-items, and align-items — and turns your choices into ready-to-use CSS. Instead of memorizing the syntax, you adjust the controls, see the result instantly, and copy the code.

        
      

      

        
How to use the CSS Grid generator

        
Building a grid layout takes only a few steps:

        
  1. Set the number of columns and rows you want.
  2. Pick a track size for columns and rows: fr (flexible fraction), px (fixed), % (percentage), or auto.
  3. Adjust the row gap and column gap to add spacing between cells.
  4. Choose how grid items align with justify-items (horizontal) and align-items (vertical).
  5. Copy the generated CSS and apply it to your container element.

      

      

        
What does fr mean in grid-template-columns?

        
The fr unit represents a fraction of the available free space in the grid container. repeat(3, 1fr) creates three columns that each take an equal share of the row, growing and shrinking with the container. Mixing units is common in real layouts — for example a fixed sidebar in px next to flexible content in fr — but fr is the go-to for responsive, evenly distributed tracks.

        
      

      

        
What is the difference between gap, justify-items, and align-items?

        
gap controls the spacing between rows and columns (you can set a single value or separate row and column gaps). justify-items positions each item along the row (inline) axis inside its cell, while align-items positions it along the column (block) axis. Setting both to stretch fills the cell; start, center, and end place the item without stretching it.

        
      

      

        
Why use this CSS Grid generator?

        
  • 100% free with no ads, sign-up, or limits.
  • Live preview grid updates instantly as you change any setting.
  • Generates clean, standard CSS you can copy with one click.
  • Supports fr, px, %, and auto track sizes plus separate row and column gaps.
  • Runs entirely in your browser — nothing is uploaded.
  • Great for learning how CSS Grid properties affect a layout.

      

      

        
Frequently asked questions

        

          
Is the CSS Grid generator free?

          
Yes. Every tool on ToolsSoup is completely free, with no account, sign-up, or hidden limits.

        

        

          
Does the generated CSS work in all browsers?

          
Yes. CSS Grid is supported by all modern browsers, so the display: grid code this tool produces works everywhere current versions of Chrome, Firefox, Safari, and Edge run.

        

        

          
Can I create responsive grids?

          
Using the fr unit makes columns and rows flexible so they resize with the container. For breakpoint-specific layouts, copy the base grid here and wrap it in your own media queries.

        

        

          
Is my data uploaded anywhere?

          
No. The generator runs entirely in your browser, so nothing you configure is sent to or stored on any server.