CSS Grid Generator
Create CSS Grid layouts visually with live preview and code export
Embed This Tool
Add this tool to your website with customizable styling
How to Use
- 1 Choose a preset or start from scratch — Select a preset layout like sidebar, dashboard, or 12-column grid, or adjust settings manually.
- 2 Configure grid tracks — Define columns and rows using fr, px, %, or auto units. Add or remove tracks as needed.
- 3 Adjust container properties — Set gap, justify-items, align-items, and content alignment options.
- 4 Position grid items — Click on items to set grid-column, grid-row, and self-alignment properties.
- 5 Copy the generated code — Copy the CSS and HTML code to use in your project.
Frequently Asked Questions
What is CSS Grid?
CSS Grid is a two-dimensional layout system for creating complex web layouts. Unlike Flexbox (which is one-dimensional), Grid allows you to control both rows and columns simultaneously, making it perfect for page layouts, dashboards, and image galleries.
When should I use CSS Grid vs Flexbox?
Use CSS Grid for two-dimensional layouts where you need control over both rows and columns (page layouts, dashboards). Use Flexbox for one-dimensional layouts along a single axis (navigation bars, button groups, centering elements). Many modern layouts use both together.
What does fr unit mean in CSS Grid?
The fr (fraction) unit represents a fraction of the available space in the grid container. For example, if you have columns set to "1fr 2fr 1fr", the middle column gets twice the space of the side columns. This makes responsive layouts easier to create.
How do I span multiple columns or rows?
Use the grid-column and grid-row properties with span values. For example, "grid-column: span 2" makes an item span 2 columns, or "grid-column: 1 / 3" places an item from column 1 to column 3. The same syntax works for rows.