CSS Grid Generator — Visual Grid Layout Builder & Code

CSS Grid Generator — Visual Layout Builder

This CSS Grid generator lets you design grid layouts visually and export production-ready CSS. Configure columns, rows, gaps, and item placement in real time — the live preview reflects every change instantly.

How to Use

Choose a preset — start with Holy Grail, Sidebar, 12-Column, or Card Grid
Edit columns — click any column size to change it, use the + button to add more, or type repeat(3, 1fr) or minmax(200px, 1fr) directly
Edit rows — same controls for row track sizes
Adjust gaps — set column-gap and row-gap independently in pixels
Select an item — click a box in the preview to configure its column/row position and span
Name a grid area — optionally assign a semantic area name for use with grid-area
Copy the CSS — grab just the container block or everything at once

Understanding CSS Grid Properties

Container properties define the grid structure:

grid-template-columns — defines how many columns exist and their sizes. Values: px, fr, auto, %, minmax(), repeat()
grid-template-rows — defines row track sizes. Same syntax as columns
column-gap / row-gap — space between column and row tracks respectively
justify-items — default alignment of items along the inline (row) axis: stretch, start, end, center
align-items — default alignment along the block (column) axis

Item properties control placement and spanning:

grid-column: start / span N — places the item starting at a column line and spanning N columns
grid-row: start / span N — places the item starting at a row line and spanning N rows
grid-area — assigns the item to a named grid area defined on the container

Key Syntax Helpers

repeat(3, 1fr) — three equal columns (shorthand for 1fr 1fr 1fr)
minmax(200px, 1fr) — column that is at least 200px but grows to fill space
repeat(3, minmax(200px, 1fr)) — responsive card grid: three columns, each 200px minimum
auto — size determined by content

Privacy

All layout calculations and CSS generation run entirely in your browser. No data is sent to any server.

FAQ

What is CSS Grid?

CSS Grid Layout is a two-dimensional layout system that divides a page into rows and columns. Unlike Flexbox (which is one-dimensional), Grid lets you control both axes simultaneously — placing items precisely in rows and columns with full control over spanning and alignment.

What does the fr unit mean in CSS Grid?

fr stands for "fractional unit" — it represents a fraction of the available space in the grid container. For example, grid-template-columns: 1fr 2fr 1fr divides the container into 4 equal parts and gives the second column twice as much space as the others. Mixing fr with fixed units (like 200px 1fr) is a common pattern for sidebars.

When should I use repeat() and minmax()?

Use repeat(N, size) to avoid writing the same column size multiple times — repeat(3, 1fr) is equivalent to 1fr 1fr 1fr. Use minmax(min, max) to create tracks that adapt to content: repeat(3, minmax(200px, 1fr)) creates three equal columns that never shrink below 200px but expand to fill available space.

What are named grid areas?

Named grid areas let you assign semantic names like "header", "sidebar", "main", and "footer" to items using the grid-area property. The container then uses grid-template-areas to define the visual layout as an ASCII art map. This approach makes complex layouts highly readable and easy to rearrange.