CSS Grid Generator

Build Two-Dimensional Layouts With CSS Grid—No Guesswork Required

CSS Grid is the most capable layout system the web has ever had, enabling precise two-dimensional control over both rows and columns simultaneously. Page-level layouts, image galleries, dashboard grids, and complex application interfaces that previously required intricate float and positioning hacks, or JavaScript layout libraries, are now achievable in a handful of clean CSS declarations. Our free CSS grid generator lets you set column count, row count, and gap spacing through simple controls, with a live preview that shows exactly what the resulting grid looks like before you write a single line of code.

The generated CSS uses the standard `display: grid`, `grid-template-columns`, `grid-template-rows`, and `gap` properties with `1fr` fractional units—the idiomatic approach for equal-distribution grids that are also responsive. Copy the output, apply it to any container, and your children become grid items arranged in the specified layout automatically.

Understanding CSS Grid's Core Concepts

CSS Grid introduces a vocabulary that's worth understanding before you start building complex layouts. A few key concepts unlock the full power of the system.

Grid Tracks: Columns and Rows

A grid is defined by its tracks—the columns running vertically and the rows running horizontally. `grid-template-columns` defines the number and size of column tracks; `grid-template-rows` defines row tracks. Our generator uses the `repeat()` function with `1fr` units: `grid-template-columns: repeat(3, 1fr)` creates three equal-width columns that together fill the available container width. The `fr` unit—fraction—distributes available space proportionally after fixed-size values and gaps are accounted for.

Mixed-size tracks are possible: `grid-template-columns: 250px 1fr 1fr` creates a fixed 250px sidebar with two equal fluid columns filling the remaining space. This is the standard pattern for sidebar layouts where the sidebar width is fixed and the main content area is fluid.

Grid Lines and Named Areas

Grid lines are the dividing boundaries between tracks. Column lines are numbered left to right starting at 1; row lines top to bottom. Individual grid items can be placed at specific line intersections using `grid-column: 1 / 3` (spanning from column line 1 to line 3, occupying two column tracks) and `grid-row: 1 / 2` (occupying one row track). This explicit placement is what enables complex layouts like the classic Holy Grail (header, sidebar, main, aside, footer) in just a few lines of CSS.

Named grid areas provide an even more readable approach for complex layouts: define named regions in `grid-template-areas` using a visual ASCII-art-style declaration, then assign each element to its area using `grid-area`. The visual intuition of the template areas declaration maps closely to the actual visual layout, making the CSS self-documenting.

The fr Unit and Responsive Distribution

The `fr` unit is CSS Grid's most powerful feature for responsive layouts. Unlike percentage widths, `fr` values are calculated after gaps are subtracted—so `repeat(3, 1fr)` with a 16px gap produces three columns that each exactly fill one-third of the container minus the two 16px gaps, without any percentage arithmetic. This eliminates the "100% minus margins" calculation problem that made percentage-based grid layouts so error-prone.

Fractional columns also respond to `minmax()`: `grid-template-columns: repeat(3, minmax(200px, 1fr))` creates three columns that are at least 200px wide but grow proportionally when space is available. Combined with `auto-fill` or `auto-fit`, this produces intrinsically responsive grids that reflow their columns based on available space without any media queries—a technique that has replaced many JavaScript-based responsive grid libraries.

Implicit vs. Explicit Grid

The tracks you define with `grid-template-columns` and `grid-template-rows` form the explicit grid. When you have more grid items than the explicit grid has cells, CSS Grid automatically generates additional tracks to accommodate them—these are the implicit grid tracks. Their size is controlled by `grid-auto-rows` and `grid-auto-columns`.

For a typical card gallery where items can vary in number and should maintain a consistent row height, setting `grid-auto-rows: 200px` (or a `minmax()` value) ensures that automatically-generated rows match the height of your explicitly defined rows. Without this, auto-generated rows default to an `auto` height that matches their tallest content, which can create inconsistent row heights when card content varies.

Responsive Grid Patterns Without Media Queries

Two CSS Grid patterns produce responsive reflow behavior without requiring any media queries—they're worth knowing because they eliminate breakpoint maintenance and work across any viewport width.

The first is `auto-fill` with `minmax()`: `grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))`. This fills the row with as many 250px-minimum columns as will fit, growing each column proportionally to fill the row width. As the viewport narrows, columns drop to the next row automatically when they can no longer maintain their minimum width. At very narrow widths, all items stack in a single column.

The second is `auto-fit` with `minmax()`, which works identically but collapses empty tracks rather than stretching them—meaning if you have 3 items in a 4-column grid, `auto-fit` stretches the 3 items to fill the full width rather than leaving a gap where the fourth column would be. The choice between `auto-fill` and `auto-fit` depends on whether you want empty space at the end of a partially-filled row or prefer items to stretch and fill.

CSS Grid vs. Flexbox: The Right Tool for Each Job

Grid and Flexbox solve different layout problems and are most powerful when used for their respective strengths. Grid is designed for two-dimensional layouts where alignment must be maintained across both rows and columns simultaneously—page frameworks, card galleries, and any layout where items should "snap to" a consistent structural grid. Flexbox is designed for one-dimensional layouts where items are distributed along a single axis—navigation bars, button groups, media objects, and stacked content sections.

In practice the two coexist in most production interfaces: Grid at the structural level (page layout, section divisions, card galleries), Flexbox within individual components (the internal layout of each card, the button row within a form, the icon-plus-label arrangement inside a navigation item). Both are essential tools; neither replaces the other.

Free, Private, and Browser-Based

The CSS grid generator runs entirely in your browser. No layout configurations are transmitted to any server or stored anywhere. The tool is completely free with no account required. Set your grid dimensions, confirm the preview, and copy the CSS—your grid is ready to build on.