CSS grid generator: build visual grid layouts and copy the code

Define columns, rows, gaps, and areas with live preview controls, then copy the complete CSS, ToolHQ's CSS grid generator runs entirely in your browser and no code is sent anywhere.

A CSS grid generator gives you visual controls for building two-dimensional layouts without hand-writing every grid-template-columns value. You set the number of columns, their sizes, the row heights, and the gaps, then watch the layout render in real time. When it looks right, you copy the CSS.

CSS Grid is the layout system that handles pages, dashboards, and galleries, any layout where items need to align on both the horizontal and vertical axis simultaneously. Where Flexbox arranges items in a line, Grid arranges them in a matrix.

Key takeaways

• CSS Grid is two-dimensional, it controls rows and columns at the same time
• The fr unit divides available space fractionally: 1fr 2fr gives one-third, two-thirds
• ToolHQ's grid generator gives you live preview and generates complete CSS
• The tool runs entirely in your browser, no code is sent anywhere
• Core properties: grid-template-columns, grid-template-rows, gap, grid-area, place-items

---

What CSS Grid does and when to use it

CSS Grid (defined in the W3C CSS Grid Layout specification) is a two-dimensional layout system built into every modern browser. You define a container as a grid with display: grid, then specify the track structure using grid-template-columns and grid-template-rows. Grid items then fall into the tracks automatically, or you can place them explicitly using grid-column and grid-row.

The key distinction from Flexbox: Grid controls both dimensions at once. You can have a sidebar that spans three rows while the header spans all four columns. Individual items can occupy multiple cells. Items can overlap. You can name areas and assign elements to them by name.

Use Grid when:

• You are building the overall page layout (header, sidebar, content, footer)
• You need items to align on both rows and columns simultaneously
• You are building a photo gallery, card grid, or dashboard
• You want media-query-free responsive layouts using auto-fit and minmax()

Use Flexbox when items flow in one direction, a nav bar, a row of buttons, a stack of cards. The CSS flexbox generator handles those one-dimensional layouts.

MDN's CSS Grid documentation is the definitive reference for every Grid property and value.

---

Core CSS Grid properties: a quick reference

Property	What it does	Example
grid-template-columns	Defines column track sizes	1fr 2fr 1fr
grid-template-rows	Defines row track sizes	auto 1fr auto
gap	Sets spacing between rows and columns	1rem
grid-template-areas	Names areas for semantic item placement	"header header" "sidebar content"
place-items	Shorthand for align-items + justify-items	center
grid-column	Controls how many columns an item spans	1 / 3
grid-row	Controls how many rows an item spans	2 / 4

---

The fr unit: the key to flexible grids

The fr unit is unique to CSS Grid and is often the most confusing part for newcomers. "fr" stands for "fraction of the available space." It works like this:

Imagine a grid container that is 900px wide. You define grid-template-columns: 1fr 2fr 1fr. The browser:

1. Subtracts any fixed-size columns and gaps from the total width
2. Divides what is left into (1+2+1) = 4 equal fractions
3. Gives the first column 1 fraction (225px), the second 2 fractions (450px), the third 1 fraction (225px)

This is why repeat(3, 1fr) creates three equal columns regardless of the container width. It adapts automatically as the viewport changes.

Common patterns:

• 1fr 1fr 1fr, three equal columns
• 250px 1fr, fixed sidebar, flexible content
• repeat(12, 1fr), 12-column grid (standard web layout system)
• repeat(auto-fit, minmax(280px, 1fr)), responsive card grid that adjusts column count automatically

---

How to use ToolHQ's CSS grid generator

1. Open the tool. Go to https://www.toolhq.app/tools/grid-generator.

2. Set column track sizes. Define your columns using fr units, px, %, or auto. Use the repeat() shorthand for equal columns.

3. Set row track sizes. Define rows similarly. For most layouts, auto rows that size to their content work well for most rows except the main content area, which gets 1fr.

4. Set the gap. Choose the spacing between tracks. A consistent gap in rem keeps spacing proportional across different screen sizes.

5. Place items. Drag items across multiple columns or rows, or use grid-area names to assign sections semantically.

6. Copy the CSS. When your layout matches what you need, copy the generated CSS. Paste into your stylesheet.

The tool runs entirely in your browser, no code is sent anywhere.

---

Common CSS Grid layouts

The "holy grail" page layout (header, sidebar, content, footer):

display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
 "header header"
 "sidebar content"
 "footer footer";

The header and footer span both columns. The sidebar is fixed at 250px. The content area takes all remaining space.

Three-column card gallery:

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;

Three equal columns with 1.5rem gaps between them.

Responsive card grid (no media queries):

display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;

Cards are at least 280px wide. As the viewport narrows, fewer cards fit per row. When only one card fits, it fills the full width. No breakpoints needed.

Natalia, a product designer at a SaaS startup, was building the admin dashboard layout. She needed a four-column widget grid on desktop that gracefully collapsed to two columns on tablet and one on mobile. She opened ToolHQ's grid generator, set repeat(auto-fit, minmax(320px, 1fr)) for columns and a 1rem gap, and saw the responsive behavior directly in the preview by resizing the browser. She copied the CSS and pasted it into the dashboard component in under five minutes, with zero JavaScript and zero media queries.

Generate your CSS grid layout visually, free at ToolHQ

---

Grid template areas: naming your layout

One of CSS Grid's most powerful features is grid-template-areas, a way to define your layout with names instead of line numbers.

 display: grid;
 grid-template-columns: 200px 1fr;
 grid-template-rows: 60px 1fr 60px;
 grid-template-areas:
 "nav nav"
 "sidebar main"
 "footer footer";
}

.nav { grid-area: nav; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

The grid-template-areas string is a visual map of your layout. Each string in quotes represents a row. Repeated names span multiple tracks. A dot (.) marks an empty cell. The result is layout code that reads like a diagram.

For complementary styling, the CSS gradient generator and border-radius generator help style the sections you create with Grid.

Leon, a full-stack developer learning CSS Grid for the first time, had tried reading the MDN documentation but struggled to connect the text to the visual result. He opened ToolHQ's grid generator, set up a three-column layout, and dragged one item to span two columns. He watched the grid-column: 1 / 3 value appear in the CSS output in real time. The visual connection between the drag and the property value made the concept click in a way that no documentation had. He now uses the tool as a sandbox whenever he starts a new grid layout before moving into his code editor.

---

Frequently asked questions

What is the fr unit in CSS Grid?

fr stands for "fraction of available space." After subtracting fixed sizes and gaps, the browser divides remaining space into fractions. 1fr 2fr gives one-third and two-thirds of the available width.

How is CSS Grid different from Flexbox?

Grid is two-dimensional, it controls rows and columns at the same time. Flexbox is one-dimensional, it controls a single row or column at a time. Use Grid for page structure and galleries; use Flexbox for component-level layouts like navbars and card rows.

Can I make a responsive grid without media queries?

Yes. Use repeat(auto-fit, minmax(280px, 1fr)) for columns. Cards will be at least 280px wide and will automatically reflow to fewer columns as the viewport narrows.

Does CSS Grid work in all modern browsers?

Yes. CSS Grid has been supported in Chrome, Firefox, Safari, and Edge since 2017. Subgrid (for nesting) has more recent support but is now available in all major browsers.

What is the difference between grid-gap and gap?

They are the same property. grid-gap was the original name. The specification renamed it to gap (which also works in Flexbox). Both values work in current browsers, but gap is the preferred modern form.

---

The short version

CSS Grid is the layout system for two-dimensional designs, pages, dashboards, galleries, and any layout where items need to align on both axes. The fr unit makes flexible, proportional columns easy. auto-fit with minmax() creates responsive grids without any media queries.

ToolHQ's CSS grid generator lets you build these layouts visually, see the result in real time, and copy the complete CSS. It runs entirely in your browser, no code is sent anywhere.

For one-dimensional component layouts (navbars, card rows, centered elements), use the CSS flexbox generator. For visual CSS styling, the CSS gradient generator and border-radius generator complement your grid work.

Build your CSS grid layout now, free at ToolHQ

---