CSS Grid Generator
Visual CSS Grid layout builder with live preview. Configure rows, columns, gap, and spans, then copy the CSS.
Grid Properties
Column Sizes
Row Sizes
Click a cell to edit its row/column span.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 10px;
}Visual Grid Builder
See your CSS Grid layout update in real-time. Adjust rows, columns, and gaps with intuitive controls.
Cell Spanning
Click any cell to make it span multiple rows or columns. Perfect for creating complex dashboard layouts.
Flexible Sizing
Use fr units, auto, fixed pixels, or minmax() for each row and column to create responsive layouts.
How to Use the CSS Grid Generator
- 1. Set the number of columns and rows using the sliders in the Grid Properties panel.
- 2. Adjust column gap and row gap to control spacing between grid cells.
- 3. Set individual column and row sizes using fr units, auto, pixels, or minmax().
- 4. Click any cell in the preview to make it span multiple rows or columns.
- 5. Click Copy CSS to copy the generated code to your clipboard.
Frequently Asked Questions
What is CSS Grid?
CSS Grid is a two-dimensional layout system that lets you create complex layouts with rows and columns simultaneously. Unlike Flexbox which is one-dimensional, Grid gives you control over both axes at once, making it ideal for page layouts, dashboards, and gallery grids.
What is the difference between CSS Grid and Flexbox?
CSS Grid is designed for two-dimensional layouts (rows and columns together), while Flexbox is for one-dimensional layouts (either a row or a column). Use Grid for overall page structure and Flexbox for component-level layouts like navbars or card rows.
What does the fr unit mean in CSS Grid?
The fr (fraction) unit represents a fraction of the available space in the grid container. For example, 1fr 2fr means the second column gets twice the space of the first. It is similar to flex-grow in Flexbox but specific to Grid.
How do I make grid items span multiple rows or columns?
Use grid-column: span N or grid-row: span N to make an item span multiple columns or rows. You can also specify exact start/end lines like grid-column: 1 / 3 to span from line 1 to line 3.