Browser-onlyNo uploadsAlways free
About Us·Contact

100+ tools · No signup · Always free

CSS Grid Generator

Build two-dimensional CSS Grid layouts visually. Configure columns, rows, gaps, alignment and named areas — generate production-ready CSS, HTML and Tailwind instantly.

Live PreviewNamed AreasCell SpansTailwind OutputResponsive CSS

How to use

1

Start with a preset

Pick a ready-made layout (Dashboard, Holy Grail, Blog, Gallery, Bento) to see a real-world grid instantly. All controls update to match the preset — tweak from there or build from scratch.

2

Configure your grid

Set columns and rows with sliders, then fine-tune the column template (e.g. 1fr 3fr 1fr), row template, gaps and container width in the Grid Config tab. Switch to Alignment to control item and content distribution.

3

Use Named Areas or Cell Spans

Toggle Named Areas to open the visual text editor — type area names into cells to define grid-template-areas. Or click any cell in the preview to set grid-column and grid-row start/end spans.

4

Set responsive breakpoints

Go to the Responsive tab to configure how many columns to show at Desktop (>1024px), Tablet (≤1024px) and Mobile (≤768px). The Responsive output format generates ready-to-paste CSS with media queries.

5

Copy the format you need

Switch between CSS, HTML, Tailwind, CSS Variables and Responsive outputs. Copy any format individually or use the Quick Copy buttons to grab all formats at once.

Common CSS Grid layouts

Dashboard

A sidebar + main area layout with header and footer. Use the Dashboard preset with grid-template-areas for a clean, semantic two-dimensional layout that's easy to modify.

Holy Grail

The classic five-area layout: header across the top, navigation + main content + aside in the middle row, footer across the bottom. grid-template-areas makes this trivially readable.

Blog / Article

A three-column layout with a narrow sidebar, wide content area and ads column — using fractional units like 1fr 3fr 1fr to give the content most of the space.

Responsive Gallery

repeat(auto-fit, minmax(250px, 1fr)) creates a gallery that automatically adjusts column count based on available width — from 1 column on mobile to as many as fit on wide screens.

Bento Grid

Asymmetric feature grids where different cards span different numbers of columns and rows — used widely in product showcases and Apple-style marketing pages. Uses grid-column/row span.

Card grids

Equal-column card layouts with consistent gaps — the simplest use of CSS Grid. repeat(3, 1fr) with gap gives you a clean three-column card grid that degrades to two or one column with media queries.

How it works

Live CSS grid preview

The visual builder renders a real CSS grid using your exact configuration as inline styles. What you see in the preview is exactly what the CSS produces — not an approximation.

Named areas editor

The area editor is a grid of text inputs where each cell corresponds to a grid cell. Cells with matching names are colored identically, showing which cells share an area. The CSS grid-template-areas string is generated from the input values.

Cell span controls

Clicking a cell in the preview opens grid-column and grid-row start/end controls. The preview applies the span inline so you see the cell expand immediately. The spans are written as nth-child selectors in the CSS output.

Five output formats

The generator produces five ready-to-use formats: standard CSS, HTML structure (with semantic tags for named areas), Tailwind JIT classes, CSS custom properties, and a media-query responsive version with configurable breakpoints.

Related tools

CSS Flexbox Generator

Visual flexbox playground with 8 layout templates and responsive preview.

CSS Clamp Generator

Generate fluid clamp() values for responsive typography and spacing.

Border Radius Generator

Design rounded corners, circles, pill buttons and organic blob shapes.

CSS Box Shadow Generator

Multi-layer shadows, neumorphism and glow effects with CSS and Tailwind output.

Frequently asked questions

Quick answers about this free online tool.

CSS Grid Layout is a two-dimensional layout system that lets you arrange elements in rows and columns simultaneously. Unlike Flexbox (which is one-dimensional — either row or column), Grid gives you precise control over both axes at once. It's the go-to tool for page-level layouts, dashboard grids, and any UI where you need items to align both horizontally and vertically.

grid-template-columns defines the size and number of columns in your grid. The most common values are: fr units (fractional, e.g. 1fr 2fr 1fr makes a 3-column layout where the middle column is twice as wide), px/rem for fixed widths, and repeat() for shorthand (repeat(3, 1fr) = three equal columns). You can mix units: 200px 1fr 200px gives a fixed-width sidebar, a flexible main area, and another fixed sidebar.

grid-template-areas lets you name regions of your grid using a visual text map. Example: grid-template-areas: 'header header' 'sidebar main' 'footer footer'. Children are then placed with grid-area: header (etc.). This makes complex layouts like the Holy Grail pattern (header, nav, main, aside, footer) readable and maintainable — the code literally looks like a ASCII diagram of the layout. Use the Named Areas editor in this tool to build and preview these visually.

Both work with repeat() to create as many columns as will fit in the container. The difference is what happens with empty tracks: auto-fill keeps empty tracks, so the grid maintains its track structure even when there are fewer items than would fill all columns. auto-fit collapses empty tracks to zero width, causing the filled items to expand to fill the container. For most responsive card grids, auto-fit is more useful: the cards stretch to fill the available space instead of leaving awkward gaps.

fr stands for 'fraction unit'. It represents a fraction of the available free space in the grid container. After fixed-size columns (px, rem) are allocated, the remaining space is divided among fr tracks proportionally. So 1fr 2fr 1fr in a 900px container with no gaps gives columns of 225px, 450px, and 225px. fr is the equivalent of flex: 1 in Flexbox but for Grid tracks, and it's the key to building flexible layouts that fill the container.

Use repeat(auto-fit, minmax(min, 1fr)). Example: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). This creates as many columns as will fit at a minimum of 250px wide, with each column growing to fill available space. When the container is 1000px wide, you get 4 columns. When it's 500px, you get 2. When it's 300px, you get 1. This is the single most powerful CSS Grid technique for responsive layouts — no breakpoints required.

Use grid-column and grid-row on the child element. grid-column: 1 / 3 means start at column line 1, end at column line 3 (spanning 2 columns). Shorthand: grid-column: span 2 spans 2 columns from wherever the item is auto-placed. For row spanning: grid-row: span 2 spans 2 rows. In this generator, click any cell in the preview to open span controls and set start/end values — the CSS is generated automatically.

justify-items controls how items are aligned within their individual grid cells along the horizontal (row) axis. justify-content controls how the tracks themselves are distributed within the grid container when there's leftover space. Same pattern for align-items (cell content, vertical) vs align-content (track distribution, vertical). Think of -items as 'inside the cell' and -content as 'between/around the columns or rows'.