CSS Grid Generator
Build a CSS grid layout visually — set columns, rows, and gaps, watch a live preview, and copy ready-to-paste grid CSS. Runs in your browser.
How to Use
- Set the number of columns and rows — the preview rebuilds instantly with a numbered cell for every track intersection.
- Adjust the column gap and row gap (in pixels) to control the spacing between cells.
- Choose how cell content is positioned with the justify-items and align-items selects.
- By default each track uses an equal 1fr share via repeat(N, 1fr); leave it as-is for a balanced grid.
- Optionally type a custom column template (for example "1fr 2fr 1fr" or "200px 1fr") to override the equal columns.
- Click Copy CSS to grab the generated .grid rule and paste it straight into your stylesheet.
Leave the custom column template blank to use an equal repeat(N, 1fr). Fill it in to override the columns with any valid track list.
CSS Grid cheat-sheet
How CSS Grid works
CSS Grid is the browser’s native two-dimensional layout system. You declare display: grid on a container and then describe its structure with two properties: grid-template-columns and grid-template-rows. Each of these takes a list of track sizes — the widths of columns or heights of rows. A track can be a fixed length like 200px, a flexible fr share, a content-based auto, or a constrained minmax() range. The child elements then flow into the cells those tracks create, one per cell by default, filling left to right and top to bottom.
The single most useful idea in Grid is the fr unit. Unlike percentages, fr works on the space that is left over after fixed tracks and gaps are accounted for, so a template like 200px 1fr gives you a fixed sidebar next to a column that simply absorbs whatever room remains. Because the leftover is divided proportionally, repeat(3, 1fr) always yields three perfectly equal columns no matter how wide the container is, and the layout never overflows the way hard-coded widths do. This generator writes those templates for you: set a column count and it emits repeat(N, 1fr), or type your own track list to mix fixed and fluid sizes.
The gap property handles the spacing between tracks. It draws gutters only between cells, never around the outer edge, which sidesteps the margin-collapsing and double-spacing headaches that plagued older float and inline-block layouts. You can set a single value for uniform gutters, or two values to control row and column spacing independently. Alignment is handled by a family of properties; the two this tool exposes are justify-items, which positions each item along the row (inline) axis within its cell, and align-items, which positions it along the column (block) axis. Setting them to stretch fills the cell, while center, start, and end place the content precisely.
Where Grid truly shines is responsive design. Pairing repeat() with auto-fit and minmax() produces layouts that reflow on their own: repeat(auto-fit, minmax(220px, 1fr)) packs in as many 220-pixel-minimum columns as will fit, then stretches them to share the row, adding and dropping columns as the viewport changes — a complete responsive card grid with zero media queries. For full page layouts, grid-template-areas lets you name regions and draw the structure as readable ASCII art, then rearrange it per breakpoint without touching the HTML. Everything this generator produces is standard CSS that works in every modern browser, and nothing leaves your device — the preview and code are built entirely in your browser as you adjust the controls.
About the CSS Grid Generator
The CSS Grid Generator gives you a fast, free answer for web development and data tasks without sending anything off your device. Build a CSS grid layout visually — set columns, rows, and gaps, watch a live preview, and copy ready-to-paste grid CSS. Runs in your browser.
How it works
Pick your options and the tool makes the result right away. Do not like it? Make another one — you can do this as many times as you want. When it looks right, copy it into your own project. Everything is made on your device, so it is yours alone.
Want the deeper story? The Knowledge Base explains the ideas behind the tools in more detail.
Frequently Asked Questions
What is the fr unit in CSS Grid?
The <code>fr</code> unit represents a fraction of the leftover free space in the grid container. After fixed-size tracks (like <code>200px</code>) and gaps are subtracted, the remaining space is divided among the <code>fr</code> tracks in proportion to their values. <code>repeat(3, 1fr)</code> makes three equal columns; <code>2fr 1fr</code> makes the first column twice as wide as the second. Because <code>fr</code> distributes available space, grids built with it stay fluid and never overflow the container the way fixed widths can.
What does repeat() do?
<code>repeat()</code> is shorthand for repeating a track pattern so you do not have to type it out. <code>grid-template-columns: repeat(4, 1fr)</code> is identical to <code>1fr 1fr 1fr 1fr</code> but far shorter, and it scales cleanly when you change the count. You can repeat multi-track patterns too — <code>repeat(3, 100px 1fr)</code> expands to six columns. Combined with <code>auto-fit</code> or <code>auto-fill</code> it also powers responsive grids that add and remove columns automatically.
How do gap, column-gap, and row-gap work?
<code>gap</code> sets the space between grid tracks — the gutters between rows and columns. It is shorthand: <code>gap: 16px 24px</code> means a 16px row gap and a 24px column gap, while a single value applies to both. You can also set <code>row-gap</code> and <code>column-gap</code> individually. Crucially, <code>gap</code> only adds space <em>between</em> cells, never around the outer edge of the grid, which makes it cleaner than margins for gutters.
When should I use CSS Grid instead of Flexbox?
Use <strong>Grid</strong> for two-dimensional layouts — when you are arranging items into both rows and columns at once, like a page layout, a photo gallery, or a dashboard. Use <strong>Flexbox</strong> for one-dimensional flows — a row of buttons, a navbar, or items that should wrap along a single axis. They are complementary: it is common to use Grid for the overall page skeleton and Flexbox inside individual cells for fine alignment.
What are grid-template-areas?
<code>grid-template-areas</code> lets you name regions of the grid and place items into them by name, drawing the layout as ASCII art. You assign each child a <code>grid-area</code> name, then sketch the structure: <code>"header header" "sidebar main" "footer footer"</code>. It is extremely readable for classic app shells, and reordering the layout for different screen sizes is as simple as rewriting the area map in a media query — no changes to the markup.
How do I make a responsive grid without media queries?
Combine <code>repeat()</code> with <code>auto-fit</code> (or <code>auto-fill</code>) and <code>minmax()</code>: <code>grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))</code>. This tells the browser to fit as many columns as will hold at least 220px, then stretch them to fill the row. As the container narrows, columns drop automatically; as it widens, columns are added — a fully responsive card grid with no media queries at all.
How do I use the CSS Grid Generator?
Just pick your options. The answer shows up right away — there is no button to press. Change anything and it updates by itself.
Does it cost anything or need an account?
No. The tool is completely free, there is no account to create, and it keeps working offline after the page first loads.
Is anything I type uploaded?
No. The tool works entirely on your device, so the values you enter never leave your browser.
Common Use Cases
Card and gallery layouts
Lay out product cards, image galleries, or blog post grids with even gutters and equal-width columns that adapt to the container.
Page and app shells
Sketch a header / sidebar / main / footer skeleton quickly and copy the grid CSS as a starting scaffold for a new page.
Dashboard tiles
Arrange metric tiles and charts into a tidy two-dimensional grid where rows and columns line up perfectly.
Form and settings layouts
Align labels and fields into clean columns using an fr-based template instead of fiddling with floats or tables.
Learning CSS Grid
Drag the numbers and watch the live preview to build intuition for how columns, rows, fr units, and gaps interact.
Prototyping responsive sections
Try a custom template like minmax(200px, 1fr) and see how the structure behaves before wiring it into a real component.
Last updated: