CSS Grid Generator
Interactive CSS grid playground with live preview and copyable CSS code.
8px
1
2
3
4
5
6
CSS (container)
display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 80px 80px; gap: 8px;
Related Tools
<->CSS Flexbox Generator
Interactive CSS flexbox playground with live preview and copyable CSS code.
CSSCSS Box Shadow Generator
Generate CSS box-shadow code with live preview using interactive sliders.
CSSCSS Border Radius Generator
Generate CSS border-radius code with live preview for all four corners.
FAQ
- What are fr units in CSS Grid?
- The fr unit (fraction) 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.
- What is the difference between CSS Grid and Flexbox?
- Flexbox is one-dimensional — it arranges items in a row or column. CSS Grid is two-dimensional — it handles both rows and columns simultaneously, making it better for complex page layouts.
- How do I make a responsive grid?
- Use auto-fill or auto-fit with minmax(), e.g. grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)). This creates as many columns as fit and expands them to fill remaining space.
The CSS Grid Generator lets you configure columns, rows, gap, and sizing using fr units. A live preview displays colored grid cells that update instantly as you adjust the settings. Copy the complete CSS display: grid code with a single click.