How to use the css grid generator
- Enter the column sizes and row sizes, such as repeat(3, 1fr) and 80px 1fr 60px, and a gap.
- Add items and give each a name, the column and row where it starts, and how many columns wide and rows tall it is.
- Watch the preview change, and read the notes about overlaps or items that run past the grid.
- Copy the CSS and the HTML.
How the code is built
The container gets display: grid with grid-template-columns, grid-template-rows and a gap. Each item gets a class from its name and two lines of placement: grid-column and grid-row, written with start and end lines. A column that starts at 1 and is 3 wide is written 1 / 4, because the end line is one past the last column.
Sizes can be numbers with px, rem, em, %, fr, vw, vh or ch, the words auto, min-content and max-content, minmax(a, b), and repeat(n, size). An fr is a share of the leftover space. If you use repeat with auto-fill or auto-fit the number of columns depends on the screen, so the preview assumes four.
Safe by design
Whatever is typed into the size and gap boxes is checked against that short list before anything is written. Text such as 1fr; color: red, a url() or a closing brace is refused with a message, so the output holds only grid code, and class names are cleaned to letters, digits and hyphens. The preview is built from the checked values.
Overlapping items are allowed in CSS, so the tool warns instead of blocking. Items past the last explicit column or row make the browser add extra tracks. For one dimensional layouts see the flexbox generator, and for decoration use the CSS gradient generator, the box shadow generator and the border radius generator.
Using the result
Paste the CSS into your stylesheet and the HTML into your page, then put your content in each div. The grid does not set any media queries, so add them if the layout should change on narrow screens. Everything is made in your browser and nothing is uploaded.
Assumptions and limits
- Only the track grammar listed on this page is accepted.
- Gaps must be a number with a unit, or 0.
- The preview uses plain sample boxes, not your real content.
- Responsive behavior, named areas and alignment properties are not generated.
Frequently asked questions
How do I make a CSS grid?
Set display: grid on a container and define columns with grid-template-columns. This tool builds that code and lets you place items by column and row.
What does 1fr mean?
One fraction of the free space in the grid. Two columns of 1fr and 2fr split the free space one third and two thirds.
How do I make an item span two columns?
Set its columns wide to 2. The code uses a start line and an end line, so it is written as 1 / 3 for an item that starts in column 1.
Can I use calc() or url() in the sizes?
No. The tool accepts only the listed forms so that nothing else can be added to the output.
Is the CSS sent anywhere?
No. It is generated in your browser.