CSS Grid Generator

Understanding the Generated CSS

The generator outputs a single .container rule with five properties: display: grid, grid-template-columns, grid-template-rows, column-gap, and row-gap. Paste it into your stylesheet and rename .container to match your own class name. The rule describes the container only; the children are placed automatically, one per cell, in source order.

Example: the Default 3 × 2 Grid

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

In a 1000px-wide container with a 16px root font size, Chrome resolved the columns to 322.664px each: (1000 − 2 × 16) ÷ 3. The rows behave less obviously. When the container has no fixed height, 1fr rows are sized from their content and then equalized, so one 200px-tall item made both rows 200px tall. With repeat(2, auto) the same items gave rows of 20px and 200px. Use auto rows unless you want every row to match the tallest one.

Example: Sidebar and Main Area

Set Columns to 2 and Rows to 3, type 240px 1fr into grid-template-columns and auto 1fr auto into grid-template-rows, then set the column gap to 24px and the row gap to 0:

.container {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 24px;
  row-gap: 0;
}

At 960px wide, the main column measured 696px (960 − 240 − 24). The middle row takes whatever height is left once the container has a height, for example min-height: 100vh, which keeps a footer at the bottom of short pages.

Limits and Common Surprises

• Container only. There are no controls for grid-column, grid-row, grid-template-areas, named lines or alignment; spanning a header across both columns needs grid-column: 1 / -1 on that child.
• Preview cell count. The preview always draws Columns × Rows cells. If your template has a different number of tracks, the extra cells go into implicit rows, just as real children would.
• Long content stretches 1fr. A 1fr column has a minimum of auto. With an unbroken URL in the middle cell of a 600px repeat(3, 1fr) grid, the columns came out 9.6px, 751px and 9.6px and overflowed the container; repeat(3, minmax(0, 1fr)) kept them at 200px each.
• auto-fill vs auto-fit. With two items in a 1000px container, repeat(auto-fill, minmax(180px, 1fr)) kept five 187.2px columns (three empty), while auto-fit collapsed the empty ones and gave each item 492px. A container narrower than 180px overflows; minmax(min(180px, 100%), 1fr) prevents that.
• The template and gap fields are not validated. An invalid value such as repeat(3 1fr) is copied as written, and the preview keeps showing the last valid template because the browser ignores the invalid value.

The track sizing rules are in CSS Grid Layout Level 2. For one-dimensional rows of items, the flexbox generator is often the simpler fit.

Common Grid Patterns

• Equal columns — repeat(3, 1fr) creates three equal columns.
• Sidebar layout — 250px 1fr gives a fixed sidebar and a flexible main area.
• Holy grail — 200px 1fr 200px columns with auto 1fr auto rows; the header and footer children span all three columns with grid-column: 1 / -1.
• Responsive tiles — repeat(auto-fill, minmax(180px, 1fr)) auto-wraps at any screen width.