CSS Grid Generator

Create CSS Grid layouts visually with customizable columns, rows, and gaps.

Grid Settings

Columns: 3

Rows: 3

Gap: 16px

Column Width

Row Height

Presets

Grid Preview

Click cells to select them

Generated CSS

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 16px;

Complete Example

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

CSS Grid in Plain English

CSS Grid creates two-dimensional layouts with rows and columns. You define the grid structure on a parent container, then place child elements into grid cells. It's the most powerful layout system CSS offers.

This generator builds the basic grid structure. Adjust columns, rows, and gap, then copy the CSS. The visual preview shows exactly what you're getting.

Key Grid Properties

grid-template-columns

Defines column widths. Use repeat(3, 1fr) for three equal columns, or 200px 1fr 2fr for mixed widths.

grid-template-rows

Defines row heights. Same syntax as columns. Often set to auto to let content determine height.

gap

Space between grid cells. Replaces the old margin hack. Use one value for uniform gap, or two for row-gap and column-gap.

fr units

Fraction units distribute available space. 1fr 2fr means the second column gets twice the space of the first.

Useful Grid Patterns

Responsive auto-fit

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Creates as many columns as fit, each at least 250px wide. Automatically adjusts to screen size without media queries.

Holy grail layout

grid-template-columns: 200px 1fr 200px;

Classic three-column layout with fixed sidebars and flexible content area. Stack vertically on mobile with a media query.

12-column grid

grid-template-columns: repeat(12, 1fr);

Flexible foundation for complex layouts. Place items across multiple columns using grid-column spans.

Other Free Tools

Search tools

CSS Grid Generator

CSS Grid in Plain English

Key Grid Properties

Useful Grid Patterns

Responsive auto-fit

Holy grail layout

12-column grid

Other Free Tools

Flexbox Playground

Media Query Builder

CSS Spacing Scale Generator

Fluid Space Calculator

Fluid Typography Calculator

PX to REM Converter

Viewport Unit Converter

CSS calc() Builder

Aspect Ratio Calculator

CSS Minifier & Beautifier

CSS Variable Extractor

CSS Specificity Calculator

CSS Counter Generator

Print CSS Helper

Scroll Snap Builder

CSS Filter Generator

CSS Gradient Generator

CSS Mesh Gradient Generator

CSS Pattern Generator

CSS Background Noise Generator

CSS Border Radius Generator

CSS Box Shadow Generator

Glassmorphism Generator

Neumorphism Generator

CSS Button Generator

CSS Loader Generator