CSS Grid Generator

Adjust grid-template-columns/rows, justify-items, align-items, and gap with an interactive GUI and preview real CSS Grid layouts live. Copy the generated CSS with one click.

Last updated: 2026-09-20

Building a CSS Grid layout by hand

CSS Grid is the two-dimensional layout method, handling rows and columns at once. This tool lets you switch `grid-template-columns` and `rows`, `justify-items`, `align-items` and `gap` on screen, confirm the result as you go, and copy the finished CSS.

**Deciding between this and Flexbox is easy if you think in terms of one axis or two.** For laying items out in a single row, Flexbox serves; **for an arrangement where rows and columns must line up together, Grid is the better fit.** Grid's distinctive strength is the `fr` unit, which expresses a share of the space left over: write `1fr 2fr` and the remaining width is divided one to two. **The other thing worth committing to memory is the form `repeat(auto-fit, minmax(200px, 1fr))`.** That alone gives you **a layout whose column count rises and falls with the width, without a single media query.**

How to use it

Start from a preset Common arrangements such as three columns and a header-with-sidebar are ready to hand.
Change the column and row definitions **Using `fr` lets the leftover space be divided by ratio.**
Try the alignment properties `justify-items` and `align-items` settle how the contents sit within each cell.
Copy the generated CSS Once the arrangement satisfies you, it can be pasted straight into your code.

Tips for getting more out of it

The fr unit in grid-template-columns: repeat(3, 1fr) represents a share of the remaining space, so column ratios stay fixed even as the viewport width changes.
The gap property only affects the spacing between rows and columns, unlike margin, which also affects the outside of the grid. You can also set row-gap and column-gap independently.
Tracks set to "auto" size themselves to fit their content, which is handy for columns or rows whose content length is unpredictable.
Overriding grid-column: span 2 on a single item lets you stretch just a header or footer across the full width of the grid.
Reach for Grid when you need a full two-dimensional layout, and Flexbox when a single row or column of items is enough (see our CSS Flexbox generator too).

Where it comes in useful

Framing a whole page

**Placing header, sidebar, main and footer is exactly what Grid is good at.**

Laying cards out in a lattice

**Combining `auto-fit` with `minmax` makes the column count change with the width of the screen.**

Aligning an input form

Lining up the columns of labels and fields lets the vertical run true and reads far better.

Learning Grid

Changing a value and watching the result makes clear how rows and columns come to be settled.

CSS Grid terms

Grid container: The parent element given `display: grid`. The rows and columns are defined within it.
Fr: **The unit expressing a share of the space left over.** With `1fr 2fr`, the remaining width is divided one to two.
Grid-template-columns: Defines the sequence and widths of the columns. `repeat()` saves writing the same value out again.
Minmax: The function stating a minimum and a maximum. **`minmax(200px, 1fr)` means "secure 200 pixels and grow if there is room."**
Auto-fit: The keyword that makes as many columns as will fit. **Combined with `minmax`, it wraps without any media query.**
Gap: The space left between rows and columns. The two directions may be set separately.

Frequently Asked Questions

Use CSS Grid when you need to control both rows and columns at once, such as an overall page skeleton or a dashboard layout. Use Flexbox when a single direction (a row or a column) of items is enough, like a navbar or a row of cards. Many real pages combine both: Grid for the page skeleton and Flexbox inside individual components.

fr stands for "fraction" and represents a share of the leftover space inside the container. For example, grid-template-columns: 1fr 2fr splits the space so the second column is twice as wide as the first. Unlike an absolute unit like px, fr tracks keep their ratio as the container is resized.

repeat() is a shorthand for repeating the same track pattern multiple times, so repeat(3, 1fr) is equivalent to writing grid-template-columns: 1fr 1fr 1fr. It stays concise even when the number of columns is large or changes dynamically, since you only need to specify the count and the track size.

The "holy grail" layout is a classic web page structure combining a header, a sidebar, main content, and a footer. Before CSS Grid, it required convoluted workarounds using floats or table markup, but properties like grid-template-areas let you reproduce it with just a few lines of CSS.

grid-column: span N makes an item stretch across N tracks (columns) horizontally. For example, giving only a header item grid-column: span 3 lets it span the full width of a 3-column grid while the other items stay in their normal cells (grid-row supports the same span syntax).

Side Note — CSS Grid's Pursuit of a "Second Dimension" That Flexbox Doesn't Cover

CSS Grid Layout was designed as a two-dimensional layout system that lets you define rows and columns at the same time, in contrast to Flexbox, which focuses on laying items out in a single direction. Standardization at the W3C began around 2011, and once Chrome, Firefox, Safari, and Edge all shipped support together in 2017, adoption in real-world projects took off quickly.

Before Grid existed, arranging a page into the classic "holy grail" structure of a header, sidebar, main content, and footer required convoluted workarounds built on floats or table markup. CSS Grid introduced declarative properties such as grid-template-columns, grid-template-rows, and grid-template-areas that let developers recreate this familiar layout in just a handful of lines of CSS.

Today, much of the design work behind dashboard UIs, image galleries, and magazine-style layouts that revolve around rows and columns is built with CSS Grid. Support for "subgrid," which lets a nested grid inherit its parent's track sizing, has also spread across major browsers, making it easier to keep complex, multi-level layouts consistent.

In practice, a common convention has emerged where Grid handles the overall page skeleton and Flexbox handles the arrangement of elements inside individual components. The two aren't competitors — they're complementary tools, each suited to a different strength (one-dimensional alignment versus two-dimensional grid placement), and combining both within a single page is considered standard practice.

Browse all trivia