CSS Grid Generator

Build CSS Grid layouts visually — adjust columns, rows, gaps, and copy.

1
2
3
4
5
6
7
8
9
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
column-gap: 8px;
row-gap: 8px;

CSS Grid Generator — What It Does

Set the number of columns and rows, define their sizes using px, %, or fr units, adjust column and row gaps, and watch a live grid preview update as you type. Copy the complete display: grid CSS block ready to paste into your project.

Key CSS Grid Properties

  • grid-template-columns — Defines column track sizes (e.g., 1fr 1fr 1fr)
  • grid-template-rows — Defines row track sizes
  • gap — Shorthand for row-gap and column-gap
  • grid-column: span N — Item spans N column tracks
  • place-items — Shorthand for align-items and justify-items

Common Grid Patterns

  • Equal 3-column — grid-template-columns: repeat(3, 1fr)
  • Holy Grail layout — grid-template-columns: 200px 1fr 200px with named rows
  • Responsive auto-fill — repeat(auto-fill, minmax(240px, 1fr))
  • Full-bleed item — grid-column: 1 / -1

Tips and Gotchas

  • fr vs auto — auto sizes to content; fr fills remaining space. Mix them for sidebar + main layouts.
  • Gap replaces margin hacks — Use gap instead of negative margins; it does not add space on the outer edges.
  • Implicit grid — Items placed beyond the defined template create implicit tracks sized by grid-auto-rows.

Frequently Asked Questions

What does the fr unit mean in CSS Grid?
fr stands for "fractional unit" and represents a fraction of the available space in the grid container. For example, grid-template-columns: 1fr 2fr creates two columns where the second is twice as wide as the first. Unlike percentages, fr units account for gaps and fixed-size tracks automatically.
How is CSS Grid different from Flexbox?
CSS Grid is two-dimensional — it manages both rows and columns simultaneously, making it ideal for full-page layouts and complex component grids. Flexbox is one-dimensional, controlling either a row or a column at a time, and is better suited for component-level alignment like navigation bars and toolbars. They complement each other and are often used together.
What is the difference between grid-template-columns and grid-auto-columns?
grid-template-columns explicitly defines the size of named columns in the grid. grid-auto-columns defines the size of implicitly created columns — those generated when items are placed outside the explicitly defined grid. Use grid-auto-columns to handle overflow items without knowing their count in advance.
How do I make a responsive grid without media queries?
Use the repeat() function with auto-fill or auto-fit and minmax(). For example: grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)). auto-fill keeps empty columns, while auto-fit collapses them. This creates a fully responsive grid that reflows automatically based on container width.
How do I span an item across multiple columns or rows?
Use grid-column: span N or grid-column: start / end on the grid item. For example, grid-column: span 2 makes the item occupy two column tracks. grid-column: 1 / -1 stretches the item from the first to the last line, spanning the full width. The same syntax applies to grid-row.