A CSS grid generator builds the code for a two-dimensional layout, defining rows and columns at the same time, and shows you the result as you adjust it. The generator below creates the grid container CSS in your browser from the column count, row count, gap, and alignment you set, then renders a live preview and gives you the rule to copy into your stylesheet.
display: grid rule with grid-template-columns and grid-template-rows set for you. You pick how many columns and rows you want and how much space sits between them, and the tool writes the CSS. Paste the rule onto a container element and its direct children fall into the grid.What CSS Grid Is
CSS Grid is a layout system that places elements into rows and columns at the same time. It is two-dimensional, which means you control both the horizontal and vertical structure of a layout from one container. You set display: grid on a parent element, define the columns and rows with grid-template-columns and grid-template-rows, and the direct children of that parent fill the cells in order. Grid handles page-level structure such as headers, sidebars, content areas, and footers, where you need rows and columns to line up across the whole layout.
How to Use This Generator
- Set the number of columns. Each column takes an equal share of the container width by default.
- Set the number of rows. Each row is forty pixels tall in the preview so you can see the structure.
- Drag the gap slider to add space between cells. The gap applies to both rows and columns.
- Choose how to justify items inside their cells: stretch fills the cell, while start, center, and end align the content.
- Copy the CSS rule from the output box and paste it onto your container element.
grid-template-columns, grid-template-rows, and the fr Unit
The two properties that define a grid are grid-template-columns and grid-template-rows. Each takes a list of track sizes. A track is a single column or a single row. You can size tracks in pixels, percentages, or the fractional unit fr. The fr unit represents a share of the free space in the container. Writing grid-template-columns: 1fr 1fr 1fr creates three columns that each take one third of the available width, and they resize together as the container changes.
1fr means one share of whatever room is left after fixed-size tracks and gaps are subtracted. This is why repeat(3, 1fr) produces three equal columns that adapt to any container width without you doing the math.The repeat() Function and fr Explained
The repeat() function is shorthand for a track list that repeats. Instead of writing 1fr 1fr 1fr 1fr by hand, you write repeat(4, 1fr), which means four tracks of 1fr each. The first argument is the number of tracks and the second is the size to repeat. This is what the generator above produces: it counts your columns and rows and writes a repeat() rule for each. Combined with the fr unit, repeat() lets you describe an even grid of any size in a single line.
Common Grid Properties
| Property | What it does |
|---|---|
| display: grid | Turns an element into a grid container so its children become grid items. |
| grid-template-columns | Defines the number and size of the columns. |
| grid-template-rows | Defines the number and size of the rows. |
| gap | Sets the space between rows and columns in one value. |
| justify-items | Aligns items horizontally inside their cells. |
| align-items | Aligns items vertically inside their cells. |
| grid-column | Lets a single item span across multiple columns. |
| grid-row | Lets a single item span across multiple rows. |
Grid vs Flexbox
Grid and Flexbox solve different problems. Grid is two-dimensional and controls rows and columns together, which fits page structure where elements must line up in both directions. Flexbox is one-dimensional and lays items out along a single axis, either a row or a column, which fits a strip of items such as a navigation bar or a row of buttons. The rule of thumb is to use Grid when you are arranging a layout in two directions and Flexbox when you are distributing items along one. For building rows of items along one axis, the Flexbox generator writes that code for you.
Last Thoughts on Generating a CSS Grid
CSS Grid replaced the float and table hacks that web layouts once relied on. Defining columns and rows in one container, then letting the children fall into place, removes most of the positioning work a layout used to need. The generator above turns that into a copy-and-paste step: set the structure, read the rule, and drop it into your stylesheet.
Generate the grid for your next layout, then refine the spacing and depth with the rest of our free tools. Add depth to grid cards with the box-shadow generator, fill backgrounds with the CSS gradient generator, and browse the full set of online tools.
Key Takeaways:
- CSS Grid is a two-dimensional layout system that controls rows and columns from a single container.
- Set
display: gridon the parent, then define tracks withgrid-template-columnsandgrid-template-rows. - The
frunit divides the free space in the container, sorepeat(3, 1fr)makes three equal, responsive columns. - The
gapproperty sets the space between cells for both rows and columns in one value. - Use Grid for two-dimensional page structure and Flexbox for one-dimensional rows or columns of items.
- This generator runs entirely in your browser and writes the CSS rule for you to copy.
Frequently Asked Questions (FAQs)
What does a CSS grid generator do?
A CSS grid generator writes the code for a grid container from settings you choose, such as the number of columns and rows, the gap, and the alignment. It shows a live preview as you adjust the values, then gives you a ready-to-use CSS rule. You paste that rule onto a container element and its direct children fall into the grid.
What is the fr unit in CSS Grid?
The fr unit stands for one fraction of the free space in a grid container. Writing 1fr 1fr 1fr creates three columns that each take one third of the available width and resize together when the container changes. It lets you build responsive columns without calculating percentages by hand.
What does repeat() mean in a grid template?
The repeat() function is shorthand for a repeating track list. Instead of writing 1fr 1fr 1fr you write repeat(3, 1fr), where the first value is the number of tracks and the second is the size to repeat. It keeps grid templates short when many tracks share the same size.
When should I use Grid instead of Flexbox?
Use CSS Grid when you are laying out a structure in two directions at once, where rows and columns must line up, such as a full page layout. Use Flexbox when you are arranging items along a single axis, such as a navigation bar or a row of buttons. Grid is two-dimensional and Flexbox is one-dimensional.
How do I add space between grid items?
Use the gap property on the grid container. A single value such as gap: 16px sets the spacing between both rows and columns. You can also write two values to set the row gap and column gap separately. The generator above exposes the gap as a slider so you can see the effect as you change it.
Does this generator send my layout anywhere?
No. The grid CSS is built entirely inside your browser as you change the controls, and nothing is uploaded, logged, or stored on any server. You can confirm this by disconnecting from the internet and watching the preview and code continue to update.
