CSS Grid Generator

Controls

3
2
8px
8px

Preview & CSS

 
   
 
 
   
 
 
 
How to Use
 
     
  1. Set columns & rows — Drag the sliders to define how many columns (1–6) and rows (1–4) your grid has.
    2.  
  2. Adjust gaps — Column Gap and Row Gap add space between tracks independently.
    3.  
  3. Enable auto-fill — Check "Auto-fill" to switch to repeat(auto-fill, minmax(120px, 1fr)) for a fully responsive grid.
    4.  
  4. Preview — Colored numbered cells show the grid structure in real time.
    5.  
  5. Copy CSS — Grab the generated grid-template-columns, grid-template-rows, and gap values.
    6.  
 
 
 
What Is CSS Grid?
 
CSS Grid Layout is a two-dimensional layout system that controls both rows and columns simultaneously. Unlike flexbox (one-dimensional), Grid lets you place elements precisely anywhere on a defined grid.
 
The fr unit (fractional unit) distributes remaining space proportionally. repeat() avoids repetitive declarations. auto-fill with minmax() creates responsive columns without media queries.
 
 
 
Common Use Cases
 
 
Photo galleries
 
Dashboard layouts
 
Product card grids
 
Magazine-style pages
 
Pricing tables
 
Responsive tile layouts
 
 
Tips & Best Practices
 
 
 Use fr units 
1fr means "one share of remaining space." repeat(3, 1fr) creates three equal columns that flex with the container width.
 
 
 gap shorthand 
If your row and column gaps are equal, you can use the gap shorthand instead of column-gap and row-gap separately.
 
 
 auto-fill vs auto-fit 
auto-fill keeps empty tracks; auto-fit collapses them. For most responsive grids without sparse items, auto-fill is the safer choice.
 
 
 Named grid lines 
For complex layouts, name grid lines with [start] syntax and place items using grid-column: start / end for readable, maintainable code.
 
 
 
Frequently Asked Questions
 
 
What is the difference between CSS Grid and Flexbox?
 
Grid is two-dimensional — it controls rows and columns. Flexbox is one-dimensional — it works along a single axis. Use Grid for page-level layouts and Flexbox for component-level alignment.
 
 
 
What does repeat(auto-fill, minmax(120px, 1fr)) mean?
 
It creates as many columns as fit, each at least 120px wide, sharing remaining space equally. This generates a fully responsive grid without any media queries.
 
 
 
How do I span an item across multiple columns?
 
Add grid-column: span 2; to the item's CSS to make it occupy two column tracks. Similarly, grid-row: span 2 spans two row tracks.
 
 
 
Is CSS Grid supported in all browsers?
 
Yes. CSS Grid has broad support across all modern browsers. The features used here — repeat(), fr, gap — are all widely available without prefixes.