What does this tool do?
The CSS Grid Generator lets you edit grid-template-columns and grid-template-rows, set the gap, and see the result in a live preview. With ready-made templates and an auto-fill option, it is ideal for developers who want to build column layouts quickly.
How to use it
- Adjust the values and options.
- See the result in the live preview.
- Copy the generated CSS/code into your project.
Quick templates and auto-fill
One click applies repeat(n, 1fr) layouts for 2, 3, 4 or 12 columns, or preset layouts like Sidebar (250px 1fr) and Holy Grail (200px 1fr 200px). The Auto-fill button generates repeat(auto-fill, minmax(200px, 1fr)); slide the minimum item width between 100 and 400px to get a responsive grid that wraps to fit the screen on its own.
Fine-tuning and preview
You can type your own values directly into grid-template-columns and grid-template-rows, such as '1fr 2fr' or 'auto 1fr auto'. The gap slider sets spacing from 0 to 40px, and the preview sliders change how many columns and rows of blocks are shown so you can see how they arrange. Copy the .grid-container rule you like with a single click and paste it into your project.
Frequently asked questions
What is the difference between auto-fill and a fixed column count?
A fixed repeat(3, 1fr) always creates three columns. With minmax and auto-fill the grid creates as many columns as fit the container at the minimum width, which is ideal for responsive grids without writing media queries.
What exactly does the 1fr unit mean?
fr represents a 'fraction' of the available free space in the grid. 'repeat(3, 1fr)' splits the remaining space into three equal parts, while '1fr 2fr' gives one column a third and the other two thirds of the space.
Does the generated code include placement for grid items?
No, the tool outputs only the parent .grid-container rule. To span specific items across multiple columns or rows, add grid-column or grid-row properties to those items yourself.
Is CSS Grid Generator free?
Yes. CSS Grid Generator and all 300+ tools on MagmaNex are completely free with no signup or account required.
Is my data safe?
Yes. Everything runs locally in your browser. The data you enter is never sent to a server, stored, or shared.
Does it work on mobile?
Yes. CSS Grid Generator works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.