CSS Grid Generator
Design CSS Grid layouts visually by clicking cells and get the code
Placed Items
Click cells in the preview to place items. Click a placed item to remove it.
Share:
How to Use CSS Grid Generator
- Set the number of columns and rows, and adjust their sizes
- Click cells in the preview to place items
- Copy the generated CSS code for the grid container and placed items
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. It's ideal for page-level layouts and component arrangements.
What are fr units?
The fr unit represents a fraction of the available space. For example, '1fr 2fr' creates two columns where the second is twice as wide as the first.
How do I place items?
Click on empty grid cells to place numbered items. Click on a placed item to remove it. The CSS code updates automatically with grid-column and grid-row values.