Toolypet
LAYOUT TOOL

CSS Grid Generator

Design CSS Grid layouts visually with column/row controls, gap adjustment, and custom templates. Preview your grid and copy production-ready code.

3
3
12px
12px
1
2
3
4
5
6
7
8
9
Generated CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 12px;
  row-gap: 12px;
}

Two-Dimensional Layout Mastery

The fr Unit — Fractions of Free Space

The fr unit is unique to CSS Grid and represents a fraction of the remaining space after fixed and content-sized tracks are calculated. In grid-template-columns: 200px 1fr 2fr, the browser first allocates 200px to the first column, then divides the leftover space in a 1:2 ratio. On a 1200px container, that means 200px + 333px + 667px. Unlike percentages, fr units automatically account for gaps: grid-template-columns: 1fr 1fr 1frwith a 20px gap gives each column exactly (containerWidth - 40px) / 3 — no manual math required.

The Responsive Grid Formula

repeat(auto-fill, minmax(250px, 1fr))

This single line replaces dozens of media queries. auto-fill creates as many columns as fit. minmax(250px, 1fr) ensures each column is at least 250px and expands equally to fill remaining space. On a 1200px screen, you get 4 columns at 300px each. On a 600px screen, 2 columns at 300px. On a 400px screen, 1 column at 400px. Swap auto-fill for auto-fit when you want fewer items to stretch to fill the row rather than leaving empty tracks.

Named Grid Areas

Grid's most readable feature: ASCII-art layout definitions. grid-template-areas: "header header" "sidebar main" "footer footer" creates a named layout where items are placed with grid-area: header. This is self-documenting — you can read the layout structure directly from the CSS. For responsive design, simply redefine the grid-template-areas in a media query to rearrange the layout: stack the sidebar below main on mobile by changing to "header" "main" "sidebar" "footer"— no HTML changes needed.

Subgrid — The Missing Piece

A common frustration: a grid child that is itself a grid container cannot inherit its parent's track sizing. subgridsolves this. Set a child's grid-template-columns or rows to subgridand its children will align to the parent's tracks. This is essential for card layouts where the card header, body, and footer need to align across multiple cards. Subgrid is supported in Chrome 117+, Firefox 71+, and Safari 16+, covering approximately 90% of global users as of 2025.

Frequently Asked Questions

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

Both create as many columns as will fit. The difference appears when there are fewer items than columns: auto-fill preserves empty tracks (the columns exist but are empty), while auto-fit collapses empty tracks to zero width, allowing existing items to stretch. Use auto-fit when you have a variable number of items and want them to expand to fill the row.

How do I make a grid item span multiple columns or rows?

Use grid-column: span 2 to span 2 columns, or grid-column: 1 / 3 to place it from line 1 to line 3. For rows, use grid-row: span 2. You can also use -1 to reference the last line: grid-column: 1 / -1 spans the entire row regardless of how many columns exist.

Can grid items overlap, and how do I control the stacking?

Yes. Explicitly place two items in overlapping grid areas using grid-column and grid-row. Items later in the source order stack on top by default. Use z-index to control the stacking order explicitly. This enables creative designs like overlapping image galleries, text over images, and decorative accents — all without absolute positioning or negative margins.