CSS Grid Generator — Build Grid Layouts Visually

Why CSS Grid Changed Web Layout

Before CSS Grid, building a two-column layout with a fixed sidebar required floats, negative margins, clearfix hacks, or careful Flexbox workarounds. None of those approaches gave you direct control over both axes simultaneously. CSS Grid does — you define rows and columns at the container level, and items snap into place without any positional tricks.

The result is cleaner HTML (no wrapper divs for clearfix), more predictable behavior across browsers, and layouts that would have been impractical before Grid became widely supported. A 12-column editorial grid, a masonry-style card layout, a dashboard with independently sized panels — these are all straightforward with Grid and painful without it.

The main friction point for developers new to Grid is the syntax. Properties like grid-template-columns, justify-items, and align-content are easy to confuse with their Flexbox equivalents, and fr units behave differently from percentages in ways that take time to internalize. A visual generator removes that friction — you see the effect before you commit to the CSS.

How to Use the CSS Grid Generator

1. Open the tool at publicsofttools.com/tools/css-grid-generator.
2. Set grid-template-columns — type a value directly in the input or click one of the preset chips. Common starting points: repeat(3, 1fr) for a three-column equal grid, 200px 1fr for a sidebar layout, or repeat(auto-fill, minmax(150px, 1fr)) for a responsive card grid.
3. Adjust row sizing and gaps — set grid-template-rows if you need fixed row heights, and adjust column-gap and row-gap to control whitespace between cells.
4. Configure alignment — use justify-items and align-items to control how content sits within each cell, and justify-content / align-content to position the grid tracks within the container.
5. Customize individual items — set col-span or row-span to make a specific item occupy multiple tracks, or override alignment for a single item with justify-self / align-self.
6. Copy the CSS output — click Copy CSS and paste into your stylesheet. Only non-default values are written, so the output stays minimal.

CSS Grid Property Reference

The generator controls two groups of properties: container properties (set on the parent element with display: grid) and item properties (set on individual children).

Advanced Grid Patterns

Responsive Card Grid Without Media Queries

The most useful pattern in CSS Grid is the auto-fill responsive column:

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

This tells the browser to fill the row with as many 200px-minimum columns as fit, with each column growing equally to fill any remaining space. As the viewport narrows, columns drop to the next row automatically. No breakpoints, no JavaScript — the grid adapts to any container width. Use auto-fit instead of auto-fill if you want fewer, wider columns when there are only a few items (auto-fit collapses empty tracks; auto-fill preserves them).

Holy Grail Layout in Five Lines

The classic three-column page layout with a header and footer — historically one of the hardest layouts to implement — is straightforward with Grid:

.page {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Assign the header to grid-column: 1 / -1 (span all columns), the footer the same, and the sidebars and main content to their respective columns. The middle row stretches to fill remaining viewport height automatically.

Featured Item in a Uniform Grid

A common editorial pattern: a 3-column card grid where the first card is larger and spans two columns and two rows. Set the container to repeat(3, 1fr) with equal row heights, then apply grid-column: span 2; grid-row: span 2; to the featured card. All remaining cards flow in automatically — the browser handles placement.

Named Grid Areas for Clarity

For complex page templates, grid-template-areas makes layouts self-documenting:

grid-template-areas:
  "header  header"
  "sidebar main"
  "footer  footer";

Then assign each element with grid-area: header, grid-area: sidebar, etc. Rearranging the layout for mobile is a single media query change to grid-template-areas — no touching individual item selectors.

Grid vs Flexbox — Choosing the Right Tool

Grid and Flexbox solve different problems. Grid is two-dimensional — rows and columns simultaneously. Flexbox is one-dimensional — items flow along a single axis. A practical rule: use Grid for page-level layout and major component structure; use Flexbox inside those Grid cells for aligning smaller elements (buttons, labels, icons). Both tools are available in every modern browser and are fully complementary — most polished UIs use both.

Common Questions

What does 1fr mean?

The fr (fractional) unit represents a share of the free space in the grid container after fixed-size tracks (px, %) have been placed.repeat(3, 1fr) gives three equal columns. 1fr 2fr 1fr gives the middle column twice as much space as the outer two. Mixing fixed and fr columns works cleanly: 250px 1fr creates a 250px column and a fluid column that fills the rest.

What is the difference between auto-fill and auto-fit?

Both work with repeat() to create a variable number of columns.auto-fill creates as many tracks as fit and preserves empty tracks if there are fewer items than the grid can hold.auto-fit collapses empty tracks so existing items can expand to fill the available space. For typical card grids, auto-fill is usually correct; use auto-fit when you want items to stretch to fill the container when there are only a few.

Why does justify-content not work on my grid?

justify-content only has a visible effect when the total size of the grid tracks is smaller than the container. If your columns are defined as 1fr or use percentages that add up to 100%, they already fill the container and there is no free space to distribute.justify-content is most useful when columns have fixed sizes (px) and the container is wider than their total.

Can I use Grid for a one-row layout?

Yes, but Flexbox is usually simpler for single-row or single-column layouts. Grid becomes the better choice when you need items in that row to align with items in other rows — for example, a header row where buttons need to line up with content below. If alignment across rows does not matter, reach for Flexbox first.