Tailwind CSS Grid Generator

Count
Columns
Rows
Implicit Grid (Auto)
Auto Flow
Auto Row Size
Auto Column Size
Controls how items are placed and sized when they exceed the defined grid template.
Spacing (Gap)
Items Alignment
Justify Items
Align Items
Content Alignment
Justify Content
Align Content
Note: Content alignment only works if columns/rows use fixed sizes (e.g. 100px) instead of 1fr. 

                
            

        


    







    
How to use the Tailwind Grid Generator

    
This interactive tool allows you to visually design and preview complex CSS Grid layouts. Once you have configured your layout, you can copy the generated Tailwind CSS utility classes or the equivalent raw CSS directly into your project.


    
1. Columns and Rows

    
You can define your grid structure using two modes:

    
    
        
  • Standard (Repeat): Creates a uniform grid where every column or row has the same size (typically 1fr to fill available space).
    • 
        
  • Custom: Allows you to define specific sizes for each track using any CSS unit (e.g., 200px 1fr 20%).
    • 
    


    
2. The Explicit vs. Implicit Grid

    
One of the most powerful (and often confusing) features of CSS Grid is the distinction between tracks you define (the explicit grid) and tracks the browser creates automatically (the implicit grid).

    
    
        
  • Explicit Grid: These are the columns and rows you explicitly define using grid-template-columns and grid-template-rows.
    • 
        
  • Implicit Grid: If you place more items into a grid than you have defined cells for, the browser creates "implicit" tracks to hold them. By default, these tracks have a height of auto, which can cause layout inconsistencies.
    • 
    

    
Our generator includes Implicit Grid controls to solve this. By setting "Auto Row Size" to 1fr, you ensure that every row created by the browser matches the size and behavior of your main rows.


    
3. Understanding Alignment

    
CSS Grid provides two distinct layers of alignment:

    
    
        
  • Items Alignment (justify-items / align-items): These control how the content inside an individual grid cell is positioned. stretch is the default, making items fill the entire width/height of the cell.
    • 
        
  • Content Alignment (justify-content / align-content): These control how the entire grid is positioned within its container. This only has a visible effect if your grid tracks use fixed sizes (like px) and don't fill the total available width or height.
    • 
    


    
4. Tailwind CSS v4 Syntax

    
This generator follows the latest syntax for Tailwind CSS v4. Note the use of arbitrary value notation for custom grids (e.g., grid-cols-[200px_1fr]). Because HTML class names cannot contain spaces, Tailwind uses underscores within square brackets to represent them. These are converted back to standard spaces in the final CSS.