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.

Tips

  • 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).

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

People who viewed this tool also viewed

CSS Gradient Generator

Add two or more color stops to instantly generate linear-gra...

CSS Box Shadow Generator

Adjust offset, blur, spread, color, and opacity with sliders...

CSS Flexbox Generator

A free tool to experiment with Flexbox layouts by adjusting...