auto-fit vs auto-fill?

auto-fit collapses empty tracks (preferred for responsive); auto-fill keeps them. With auto-fit + minmax(250px, 1fr), if you have 2 items, they expand to fill the row. With auto-fill, you'd see 2 items at minimum width with empty tracks. Most use cases want auto-fit. Pick auto-fill only when you want explicit empty cells (rare).

Fractional unit — distributes available space proportionally. `grid-template-columns: 1fr 2fr 1fr` makes the middle column twice as wide as the outer two. Different from percentages (which work on parent) or pixels (which are fixed). 1fr is uniquely Grid; it's why Grid replaced most flexbox-based column layouts.

How do I place items in specific cells?

Set `grid-column` and `grid-row` on the child elements. Example: `.header { grid-column: 1 / -1 }` spans all columns. `.sidebar { grid-row: 2 / 4 }` spans rows 2-3. Named grid areas (`grid-template-areas`) are even cleaner for page-level layouts — you draw the layout in ASCII art and reference area names from children.

Grid: 2D layouts (rows AND columns). Flexbox: 1D layouts (rows OR columns). Use Grid for full-page layouts, dashboards, galleries. Use Flexbox for nav bars, button groups, single rows of content. They compose: a Grid container can have Flexbox children, or vice versa. Modern web layout uses both.

What's the browser support?

Universal in modern browsers since 2017 (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+). 96%+ global support as of 2026. Grid features added later (subgrid, masonry) have less complete support. Subgrid: Firefox 71+, Safari 16+, Chrome 117+; reasonable in 2026 but verify. Masonry: still experimental.

What about CSS subgrid?

Subgrid lets a nested Grid inherit its parent's track sizing. Example: a card layout where each card has internal rows aligned to the parent's column tracks. Without subgrid, you'd duplicate track definitions; with it, the child says `grid-template-columns: subgrid` and inherits. Useful for complex aligned layouts. Browser support reached cross-browser stability around 2023-2024.

Developer Utilities · Free tool

CSS Grid Generator

Build a CSS Grid template visually from equal columns to custom tracks, with a live preview. A free online generator that works in your browser.

Updated June 2026

Column templateColumns (3)Rows (2)Column gap (16px)Row gap (16px)

Preview

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  column-gap: 16px;
  row-gap: 16px;
}

Found this useful?Email Buy Me a Coffee

What it does

Visual CSS Grid template builder. Pick a column template (equal columns, auto-fit responsive, or custom track strings), set the number of rows, set gaps between cells, and copy the resulting CSS. The live preview shows your grid with numbered cells so you can see exactly what the rules produce before using them in your project.

CSS Grid was the most-anticipated CSS layout feature when shipped in major browsers in March 2017 (Chrome 57, Firefox 52, Safari 10.1, Edge 16). It replaced flexbox-based hacks and float-based layouts for two-dimensional layouts. Compared to flexbox, which is one-dimensional (rows OR columns), Grid handles both axes simultaneously — perfect for full-page layouts, dashboards, image galleries, calendars, magazine-style content layouts, and any design where you need explicit row + column control.

Common patterns:

3-column equal grid: grid-template-columns: repeat(3, 1fr) — three equal-width columns. The 1fr unit is the magical Grid feature: it distributes available space proportionally.
Responsive auto-fit: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) — columns are at least 250px wide, but stretch to fill available space, automatically wrapping more or fewer columns as the viewport changes. The most useful Grid pattern for responsive image galleries.
Sidebar + main: grid-template-columns: 250px 1fr — fixed-width sidebar, flexible main content.
Holy Grail layout: header / nav / main / aside / footer — Grid does this in 4 lines of CSS where flexbox needs 30+ lines of nested wrappers.

Embed this tool on your siteShow snippet

Paste this snippet into any page. Loads on-demand (lazy), no tracking scripts, and sized to most dashboards. Replace the height to fit your layout.

<iframe src="https://freetoolarena.com/embed/css-grid-generator" width="100%" height="720" frameborder="0" loading="lazy" title="CSS Grid Generator" style="border:1px solid #e2e8f0;border-radius:12px;max-width:720px;"></iframe>

Embed docs →

How to use it

Pick column template: 'equal columns' (specify count, all equal width), 'auto-fit responsive' (wraps based on min-width), or 'custom' (paste your own track string like '200px 1fr 300px').
Set the number of rows (or 'auto' for content-defined row heights).
Set gap (space between cells) — typical: 16-24px.
Watch the live preview update with numbered cells showing the resulting grid.
Copy the CSS and apply to your container element.
For grid placement within the container (which cells specific child elements go in), set `grid-column` and `grid-row` on each child via additional CSS or inline styles.

When to use this tool

Building a 2D layout (rows AND columns matter) — image galleries, dashboards, calendars, magazine layouts.
Responsive layouts where you want columns to wrap automatically based on viewport width (auto-fit pattern).
Page-level layouts with header / nav / main / sidebar / footer regions.
Replacing complex nested-flexbox hacks with cleaner Grid syntax.

When not to use it

1D layouts — for a single row or column of items, flexbox is simpler. Grid is overkill for nav bars, button groups, etc.
Older browser support — Grid works in all modern browsers (95%+ global as of 2026), but if you need IE11 support (rare in 2026), Grid has incomplete coverage. Use flexbox or a fallback.
Complex masonry layouts (Pinterest-style staggered grid) — Grid's masonry support is in CSS spec but browser support is patchy. Use a JS library like Masonry.js or column-count CSS for those.

Common use cases

Pre-decision sanity-check on inputs and outputs
Educational use — demonstrating the underlying concept
Onboarding a colleague who needs the same calculation/conversion
Verifying a number or output before passing it on

Frequently asked questions

auto-fit vs auto-fill?: auto-fit collapses empty tracks (preferred for responsive); auto-fill keeps them. With auto-fit + minmax(250px, 1fr), if you have 2 items, they expand to fill the row. With auto-fill, you'd see 2 items at minimum width with empty tracks. Most use cases want auto-fit. Pick auto-fill only when you want explicit empty cells (rare).
What's the 1fr unit?: Fractional unit — distributes available space proportionally. `grid-template-columns: 1fr 2fr 1fr` makes the middle column twice as wide as the outer two. Different from percentages (which work on parent) or pixels (which are fixed). 1fr is uniquely Grid; it's why Grid replaced most flexbox-based column layouts.
How do I place items in specific cells?: Set `grid-column` and `grid-row` on the child elements. Example: `.header { grid-column: 1 / -1 }` spans all columns. `.sidebar { grid-row: 2 / 4 }` spans rows 2-3. Named grid areas (`grid-template-areas`) are even cleaner for page-level layouts — you draw the layout in ASCII art and reference area names from children.
Grid vs Flexbox?: Grid: 2D layouts (rows AND columns). Flexbox: 1D layouts (rows OR columns). Use Grid for full-page layouts, dashboards, galleries. Use Flexbox for nav bars, button groups, single rows of content. They compose: a Grid container can have Flexbox children, or vice versa. Modern web layout uses both.
What's the browser support?: Universal in modern browsers since 2017 (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+). 96%+ global support as of 2026. Grid features added later (subgrid, masonry) have less complete support. Subgrid: Firefox 71+, Safari 16+, Chrome 117+; reasonable in 2026 but verify. Masonry: still experimental.
What about CSS subgrid?: Subgrid lets a nested Grid inherit its parent's track sizing. Example: a card layout where each card has internal rows aligned to the parent's column tracks. Without subgrid, you'd duplicate track definitions; with it, the child says `grid-template-columns: subgrid` and inherits. Useful for complex aligned layouts. Browser support reached cross-browser stability around 2023-2024.

Learn more

Explore more developer utilities tools

100% in-browserNo downloadsNo sign-upMalware-freeHow we keep this safe →