CSS Grid Generator
Create and customize CSS Grid layouts visually. Configure columns, rows, gaps, and item placement with a live preview.
- Home
- Web Dev
- CSS Grid Generator
What is CSS Grid?
CSS Grid Layout is a two-dimensional layout system for the web. It allows you to divide a page into rows and columns, giving you precise control over the placement and sizing of elements.
This tool features:
- Real-time preview — See the grid layout update instantly as you adjust controls.
- Full CSS Grid control — Configure columns, rows, gap, item alignment, and content alignment.
- Visual item placement — Grid items are numbered and color-coded for easy reference.
- Copy HTML & CSS — Export both the HTML structure and CSS code with one click.
CSS Grid Properties
| Property | Description | Example |
|---|---|---|
grid-template-columns |
Defines the columns of the grid | 1fr 1fr 1fr |
grid-template-rows |
Defines the rows of the grid | auto auto auto |
gap |
Sets the gap between grid items | 8px |
justify-items |
Aligns items along the row axis | center |
align-items |
Aligns items along the column axis | stretch |
justify-content / align-content |
Aligns the entire grid within its container | center |
How to Use
- Set the grid structure — Adjust the number of columns, rows, and gap size using the sliders.
- Customize sizes — Choose column and row sizing units like
1fr,auto, or fixed pixel values. - Configure alignment — Set how items and the grid itself are aligned within the container.
- Copy the code — Click Copy HTML or Copy CSS to export your grid layout.
Frequently Asked Questions
What is the difference between fr and px?
fr (fraction unit) distributes available space proportionally, while px sets a fixed size. For example, 1fr 1fr 1fr creates three equal-width columns, while 200px 1fr creates a fixed 200px column and a flexible remaining column.
When should I use Grid vs Flexbox?
Use CSS Grid for two-dimensional layouts (rows AND columns). Use Flexbox for one-dimensional layouts (either a row OR a column). Grid is ideal for page layouts, card grids, and dashboards.
Is this tool free to use?
Yes. All processing happens entirely in your browser. No data is sent to any server.