Built and fact-checked by the DocNectar team — see our editorial standards
Key Features
Instant Calculation
Get accurate results in real time with our optimized algorithm.
Mobile Friendly
Fully responsive design. Works on all devices & screen sizes.
Privacy Focused
Your data stays on your device. We don't store any inputs.
100% Free
No hidden costs. This tool is completely free forever.
CSS Grid lays out items into a two-dimensional grid of rows and columns, and the <code>repeat()</code> function is the quickest way to define a set of equal-width tracks without listing each one manually.
This generator builds a grid container declaration with your chosen number of columns, rows, and gap spacing.
How it works
Enter the number of columns and rows, plus optional column and row gap values. The generator produces <code>display: grid;</code> along with <code>grid-template-columns</code> and <code>grid-template-rows</code> using the <code>repeat()</code> function for equal-width tracks.
- Enter number of columns.
- Enter number of rows.
- Enter column gap (px, optional).
- Enter row gap (px, optional).
- Click Calculate to see your results.
Examples
3-column, 2-row grid
Setting 3 columns and 2 rows produces grid-template-columns: repeat(3, 1fr); and grid-template-rows: repeat(2, 1fr);, creating six equal-sized grid cells.
Who should use it
- Quickly scaffolding a CSS Grid layout for a photo gallery, dashboard, or card grid.
- Learning the repeat() function's syntax for defining grid tracks.
Industry applications
- Web design and front-end development
- Responsive web design
Advantages
- Generates a complete, ready-to-use grid container declaration.
- Uses the concise repeat() function rather than listing each track manually.
Limitations
- Only generates equal-width/height tracks — custom track sizes (like a fixed sidebar plus flexible content area) need manual adjustment.
Common mistakes to avoid
- Using CSS Grid for a simple single-row/column layout where Flexbox would be simpler and more appropriate.
- Forgetting that repeat(3, 1fr) creates equal-width tracks — different fr values (like 2fr 1fr) are needed for unequal column widths.
Best practices
- Use CSS Grid when you need to align content in both rows and columns simultaneously (like a photo gallery or dashboard layout); use Flexbox for simpler single-direction layouts (like a navigation bar).
Tips
- For a responsive grid that automatically adjusts its column count based on available space (without media queries), replace the fixed column count with <code>repeat(auto-fit, minmax(200px, 1fr))</code> — a common CSS Grid pattern worth learning once you understand the basic repeat() syntax this tool generates.