CSS Grid Generator

How to use this tool

1. Set the row count, or enter 0 to let rows be created automatically.
2. Adjust column and row gaps.
3. Choose equal columns or auto-fill; for auto-fill, set the minimum cell and preview width.
4. Copy the generated CSS.

This generator creates CSS for a grid container: its columns, optional fixed row count, and gaps. In auto-fill mode, the preview uses the same minimum cell width and track rule as the copied CSS; its width control shows how the column count changes as the container grows. The tool does not place child elements, size individual tracks, create named areas, or provide an auto-fit control. The layout patterns below are CSS examples to adapt manually, not presets loaded by the generator.

CSS Grid terminology

Common layout patterns

• Holy grail: header, footer, left sidebar, content, right sidebar. Use grid-template-areas with named zones for clean readability.
• Sidebar + content: grid-template-columns: 250px 1fr. Fixed sidebar, fluid content.
• Responsive card grid: grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)). Cards wrap automatically at any viewport width without media queries.

fr vs. % vs. px

• px: fixed size; does not adapt to the container. Good for sidebars with a known minimum width.
• %: relative to the grid container, but does not account for gap. Adding 50% + 50% with a gap causes overflow.
• fr: distributes the remaining space after fixed and percentage columns are placed. It handles gap automatically and is the preferred unit for fluid columns.

Grid vs. Flexbox

When to use Grid: Grid excels at two-dimensional layouts where you need precise control over both rows and columns simultaneously. Use it for page-level layouts (holy grail, dashboard grids, galleries) or any design where elements span multiple rows/columns.

When to use Flexbox: Flexbox is designed for one-dimensional layouts - a single row or a single column. Use it for navigation bars, card content alignment, centering, and any layout where items flow in a single direction. Flexbox is simpler when you don't need 2D positioning.

Can you combine them? Yes - and you should. A common pattern is Grid for the page structure (header, sidebar, content, footer) and Flexbox for the internal layout of each section.

Named grid areas

The grid-template-areas syntax lets you define semantic layout regions by name:

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

This is far more readable than line-number positioning (grid-column: 1 / 4) and makes layout restructuring trivial - just rearrange the ASCII-art grid.

Subgrid

The subgrid value (CSS Grid Level 2, supported in Firefox 71+, Safari 16+, Chrome 117+) allows a nested grid to inherit the parent grid's track sizing. Before subgrid, child grids were independent and couldn't align with the parent's columns/rows. Example:

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.child {
  display: grid;
  grid-template-columns: subgrid; /* Inherits parent's 3 columns */
  grid-column: span 3;
}

This makes complex nested layouts (like card grids where each card's internal sections align across the entire page) significantly easier.