100% PrivateFree
Preview
1
2
3
4
5
6
Grid Properties
3
2
12px
CSS Output
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
  grid-auto-flow: row;
}

How It Works

1

Set Grid Dimensions

Choose the number of columns and rows, or type custom template values like "1fr 2fr auto".

2

Adjust Gap and Flow

Set the gap between cells and choose the auto-flow direction.

3

Copy CSS

Copy the generated CSS grid properties to use in your project.

Frequently Asked Questions

What is CSS Grid?
CSS Grid is a two-dimensional layout system that lets you arrange elements in rows and columns simultaneously. It is ideal for page layouts and complex component designs.
What does grid-template-columns do?
grid-template-columns defines the number and size of columns in a grid. Values like "1fr 1fr 1fr" create three equal columns, while "200px 1fr 2fr" mixes fixed and flexible widths.
What is the fr unit?
The fr (fraction) unit represents a fraction of the available space. In "1fr 2fr", the second column takes twice the space of the first.
What is grid-auto-flow?
grid-auto-flow controls how auto-placed items fill the grid. "row" fills row by row (default), "column" fills column by column, and "dense" fills gaps in the grid.
Can I combine Grid and Flexbox?
Yes, Grid and Flexbox complement each other. Use Grid for the overall page layout and Flexbox for component-level alignment within grid cells.
Share:

About Grid Gen

What this tool does

Developer and design tools include CSS generators (gradients, shadows, glassmorphism), code playgrounds, color pickers, responsive previews, and reference charts for HTML tags, HTTP methods, and keyboard shortcuts.

Why use this tool

Front-end development involves constant context switching between code and visual output. Having generators and references in a single browser tab speeds up prototyping and reduces the need to search through documentation sites.

How it works

Each tool provides an interactive UI: you tweak parameters (colors, radii, durations), and the tool generates the corresponding CSS, HTML, or SVG code in real time. Copy the snippet directly into your project.

Pro tip

Use the CSS variable output option when available. It makes your generated code theme-friendly and easier to maintain across a design system.

Deep Dive: Related Research

The Complete Guide to CSS in 2026

30,000 words · 65 min read

The Complete UI/UX Design Systems Guide 2026: Tokens, Typography, Color, Components & Accessibility

30,000 words · 65 min read

Explore More

Love this tool? Explore 12467+ more

Free online tools for images, PDFs, text, code, and more. All running in your browser.

Explore All Tools