🔲

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.

Related Tools

🌈

CSS Gradient Generator

Create beautiful CSS gradients with a visual editor. Copy the CSS code.

🎯

Color Palette Generator

Generate beautiful color palettes from a base color. Export as CSS or JSON.

🔲

Box Shadow Generator

Design CSS box shadows visually with a live preview. Copy the code.

🎨

Color Name Finder

Enter any hex color code and instantly get its exact or closest color name. Covers all 16.7 million hex colors using a database of 1,500+ named colors and smart matching.

🎨

Color Contrast Checker

Check WCAG 2.1 color contrast ratios and accessibility compliance for text and backgrounds.

📐

CSS Flexbox Generator

Visual CSS Flexbox playground — configure flex properties and get ready-to-use CSS and Tailwind code.

Browse all 92+ free tools