🔲

CSS Grid Generator

Visual CSS Grid layout builder - configure columns, rows, gaps, and item spans with live preview and code output.

Quick Presets

grid-template-columns

grid-template-rows

Gap (px)

Items (6)

Preview

Click an item to adjust its column/row span

Generated CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
}

About CSS Grid Generator

Free visual CSS Grid generator with a live interactive preview. Define grid-template-columns, grid-template-rows, and gap using standard CSS values, then adjust individual item spans by clicking on them. Apply quick presets for common layouts (Holy Grail, Dashboard, Gallery, Sidebar, Footer) or build your own from scratch. Copy the generated CSS or Tailwind utility classes with one click. Perfect for learning CSS Grid, prototyping layouts, or generating production-ready code. 100% browser-based, no signup required.

Frequently Asked Questions

What is CSS Grid?

CSS Grid Layout is a two-dimensional layout system for the web. It lets you create complex layouts with rows and columns simultaneously, unlike Flexbox which handles one dimension at a time. CSS Grid is ideal for page-level layouts, dashboards, galleries, and any design where you need precise control over both axes.

What CSS values can I use for columns and rows?

You can use any valid CSS grid values: fr units (1fr, 2fr), px values (200px), percentages (50%), auto, min-content, max-content, minmax(), repeat(), and combinations like 'repeat(3, 1fr)' or '200px 1fr 200px'.

How do I make an item span multiple columns or rows?

Click on any item in the preview to select it. Then use the Col Span and Row Span controls to adjust how many columns or rows the item should occupy. The generated CSS will include the grid-column and grid-row span properties.

What are the preset layouts?

Five presets are included: Holy Grail (header, 3-column body, footer), Dashboard (3x2 equal grid), Gallery (4-column image grid), Sidebar (side panel + main content), and Footer (4-column footer). Presets instantly set the columns, rows, gap, and item count.

Does this generate Tailwind classes?

Yes. In addition to standard CSS, the tool generates equivalent Tailwind CSS classes using arbitrary value syntax. Copy either format with one click.

Is this tool free?

Yes, completely free with no signup required. All code generation happens in your browser - nothing is sent to any server.

BEYOND THE LAYOUT

You built the grid. Who's running the business inside it?

Intellure is an AI employee that answers customers, sells, books appointments, and follows up on leads across WhatsApp, Instagram, and your site. Flat $299 a month, no hiring.

See Intellure

About CSS Grid Generator

Frequently Asked Questions

What is CSS Grid?

What CSS values can I use for columns and rows?

How do I make an item span multiple columns or rows?

What are the preset layouts?

Does this generate Tailwind classes?

Yes. In addition to standard CSS, the tool generates equivalent Tailwind CSS classes using arbitrary value syntax. Copy either format with one click.

Is this tool free?

Yes, completely free with no signup required. All code generation happens in your browser - nothing is sent to any server.

About CSS Grid Generator

Frequently Asked Questions

Related Tools

CSS Gradient Generator

Color Palette Generator

Box Shadow Generator

Color Name Finder

Color Contrast Checker

CSS Flexbox Generator

You built the grid. Who's running the business inside it?

About CSS Grid Generator

Frequently Asked Questions

Related Tools

CSS Gradient Generator

Color Palette Generator

Box Shadow Generator

Color Name Finder

Color Contrast Checker

CSS Flexbox Generator

You built the grid. Who's running the business inside it?