Free CSS Grid Generator

How It Works

1. Set grid dimensions: Enter the number of columns and rows for your grid layout.
2. Define tracks: Set the width of each column and height of each row using fr units, pixels, percentages, auto, or minmax().
3. Copy the CSS: The generated display: grid, grid-template-columns, grid-template-rows, and gap properties are ready to paste into your stylesheet.

Why Use CSS Grid Generator?

CSS Grid is the most powerful layout system in CSS — capable of creating complex two-dimensional layouts that previously required tables, floats, or JavaScript. But mastering grid-template-columns, fr units, minmax(), repeat(), and named areas takes practice. This visual generator lets you build any grid layout by clicking and dragging, then outputs clean CSS that you can use immediately or study to deepen your understanding of Grid.

Features

• Visual grid builder: Click to define column and row tracks visually.
• fr unit support: Use flexible fr units for responsive proportional columns.
• minmax() shortcut: Easily create responsive columns with minimum and maximum size constraints.
• Gap control: Set column-gap and row-gap independently.
• Named areas: Define grid-template-areas with a visual area-painting interface.

Frequently Asked Questions

What is a "fr" unit in CSS Grid?

The fr (fraction) unit distributes available space proportionally. In a 3-column grid with 1fr 2fr 1fr, the middle column gets twice as much space as the outer columns. fr units fill remaining space after fixed-size tracks are allocated.

How do I make a responsive grid without media queries?

Use repeat(auto-fill, minmax(200px, 1fr)) for the grid-template-columns value. This creates as many columns as fit at the minimum size, expanding to fill available space. Items automatically reflow as the container width changes.

What is the difference between grid-template and grid-auto?

grid-template-columns/rows defines explicit tracks that you specify. grid-auto-columns/rows defines the size of implicit tracks — columns and rows created automatically when items overflow the explicit grid.