How to use the CSS Grid Generator
1. Set the number of columns and rows using the sliders.
2. Adjust column/row gaps and the size template for each track (e.g., 1fr, auto, 200px).
3. Preview the grid live and copy the generated CSS to apply to your layout container.
What is it?
CSS Grid Layout is a two-dimensional layout system that gives you full control over both rows and columns simultaneously. Unlike Flexbox (one-dimensional), Grid lets you place elements precisely in a grid of cells, making it ideal for page layouts, dashboards, image galleries, and any design that requires alignment in two directions.
The fr unit (fraction) distributes available space proportionally — 1fr 2fr gives the second column twice the width of the first. The grid-template-columns and grid-template-rows properties define the structure, while column-gap and row-gap add spacing between tracks. This generator creates the foundational CSS for a regular grid pattern.
Example
Columns: 3 (1fr each) · Rows: 4 (auto each) · Gap: 1rem
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, auto);
gap: 1rem;
}repeat(3, 1fr) is the most common responsive grid pattern — three equal columns that fill the container.
Benefits
Design grid layouts visually without memorising grid-template syntax
Define columns, rows, and gaps with controls and see the grid update live — grid-template-columns syntax is generated for you.
Generate complex multi-column layouts in seconds
Layouts that would take 10 minutes to write correctly — auto-fill, minmax, named areas — are generated in one click.
Understand grid-template-areas interactively
See exactly how named grid areas map to columns and rows in real time as you adjust the grid definition.
Complete CSS output includes all required grid properties
The output includes display:grid, template definitions, and gap — paste directly into your stylesheet and adapt from there.
Frequently asked questions
What is the fr unit?
The fr (fraction) unit represents a fraction of the available space in the grid container. 1fr 1fr 1fr creates three equal columns. 1fr 2fr gives the second column twice the space. It's the most flexible unit for responsive grid layouts.
What is the difference between grid-template-columns and grid-auto-columns?
grid-template-columns explicitly defines the size of each column track. grid-auto-columns defines the size of implicitly created columns (when content overflows the defined grid). This generator uses template columns for explicit control.
When should I use CSS Grid vs Flexbox?
Use Grid for two-dimensional layouts where you need to align items in both rows and columns — page layouts, card grids, complex dashboards. Use Flexbox for one-dimensional layouts where items flow in a single direction — navigation bars, button groups, inline form elements.