CSS Grid Generator

Build CSS Grid layouts visually. Set columns, rows, gaps, and template values with live preview and instant code output. Free, browser-based.

100% Client-Side Your data never leaves your browser Free · No Sign-Up
Preview
Generated CSS

Related Tools

UUID Generator Generate v4 UUIDs instantly — single or batch. Color Converter Convert colors between HEX, RGB, and HSL formats with a live color preview. Regex Tester Test regular expressions in real time with match highlighting and capture group details. Timestamp Converter Convert Unix timestamps to human-readable dates and vice versa. Auto-detects seconds vs milliseconds. QR Code Generator Generate QR codes from URLs, text, Wi-Fi credentials, and more. Download as PNG. Cron Expression Parser Parse and explain cron expressions in plain English. Preview next 10 scheduled run times.

How to Use

  1. Set Columns and Rows — the preview and template inputs update automatically.
  2. Adjust Column Gap and Row Gap to control gutters between cells.
  3. Override grid-template-columns or grid-template-rows with any custom value (e.g. 200px 1fr auto).
  4. The live Preview reflects every change instantly.
  5. Click Copy to copy the generated .container { … } block to your clipboard.

Understanding the Generated CSS

The generator outputs a single .container rule with five properties: display: grid, grid-template-columns, grid-template-rows, column-gap, and row-gap. Paste it into your stylesheet and rename .container to match your own class name.

Common Grid Patterns

  • Equal columns — repeat(3, 1fr) creates three equal columns.
  • Sidebar layout — 250px 1fr gives a fixed sidebar and a flexible main area.
  • Holy grail — 200px 1fr 200px with matching rows for header/footer.
  • Responsive tiles — repeat(auto-fill, minmax(180px, 1fr)) auto-wraps at any screen width.

FAQ

What is CSS Grid?

CSS Grid is a two-dimensional layout system built into CSS. It lets you define rows and columns simultaneously, then place elements precisely within a grid container. It's ideal for page-level layouts, card grids, image galleries, and any UI that needs both horizontal and vertical structure.

What does grid-template-columns do?

grid-template-columns defines the number and size of the grid's columns. The generator pre-fills it with repeat(N, 1fr) — N equal-width columns that each take one fractional unit of the available space. You can override this with any valid value, such as 200px 1fr 2fr or auto-fill minmax(200px, 1fr).

What is the difference between column-gap and row-gap?

column-gap sets the space between columns and row-gap sets the space between rows. Together they control the gutters inside the grid. You can also use the shorthand gap: row row-gap column-gap.

What is the 1fr unit?

fr stands for fractional unit. It distributes the remaining free space in the grid container proportionally. For example, 1fr 2fr 1fr creates three columns where the middle column is twice as wide as the other two. It's the most common unit for responsive grid layouts.

How do I make a responsive grid without media queries?

Use auto-fill or auto-fit with minmax(): grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)). This creates as many columns as can fit the minimum size and stretches them to fill any remaining space — no media queries needed.