CSS Grid Generator

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

auto-fill creates as many tracks as will fit and keeps empty tracks; auto-fit collapses empty tracks to zero, allowing items to stretch. Use auto-fit when you want items to grow into remaining space.

Q: How do I center items in a grid?

Use place-items: center on the grid container. For a single item, use place-self: center on the item.

Q: What is the difference between grid-template and grid-auto?

grid-template defines explicit tracks with fixed positions. grid-auto handles implicit tracks created when content overflows the explicit grid.

CSS Grid is the most powerful layout system in CSS, and subgrid — now supported in all modern browsers since 2023 — unlocks nested grids that align to their parent. This generator gives you a visual playground to design grid templates and copy the CSS. Perfect for quickly prototyping layouts or teaching yourself the grid-template-columns shorthand. Adjust columns, rows, and gap values to see the grid update in real time, then grab the generated code.

Columns Template Rows Template Gap (16px) Enable Subgrid

Direct CSS

CSS Variables

What is CSS Grid?

CSS Grid is a two-dimensional layout system that lets you define both rows and columns at the same time. Unlike flexbox, which works along a single axis, grid gives you full control over horizontal and vertical placement simultaneously. You declare columns with grid-template-columns and rows with grid-template-rows, and the browser creates a grid of cells that child elements flow into automatically. Grid also supports explicit placement with line numbers, named areas, and spanning, so you can build complex page layouts with very little CSS.

With subgrid, a child element can inherit its parent grid's track definitions, meaning nested items align perfectly to the outer grid lines without duplicating track sizes. This is invaluable for card layouts, dashboards, and form designs where consistent alignment across nested components matters. Subgrid reached full cross-browser support in September 2023, making it safe to use in production for modern projects.

CSS Grid introduced several powerful functions that make responsive layouts simpler to write. The repeat() function reduces repetition when defining identical tracks. The minmax() function sets a minimum and maximum size for a track, allowing it to shrink and grow fluidly. Combined with the auto-fill and auto-fit keywords, you can create fully responsive grids that automatically adjust the number of columns based on available space, with no media queries required.

How to use this tool

This generator gives you a visual way to design CSS Grid layouts and copy the resulting code directly into your project. Start by entering a column template. Use values like 1fr 2fr 1fr for a three-column layout where the center column is twice as wide, or repeat(3, 1fr) for three equal columns. You can mix units freely: 200px 1fr 1fr creates a fixed 200-pixel sidebar with two flexible content columns.

Next, set the row template. Common values include auto for content-sized rows, 100px for fixed-height rows, or minmax(100px, auto) for rows that are at least 100 pixels tall but grow with content. Adjust the gap slider to control the spacing between cells. Finally, enable the subgrid option to see how a nested grid item can inherit the parent's column tracks. The preview updates in real time, and you can copy either the direct CSS or the CSS custom properties version.

Practical examples

Holy Grail layout with CSS Grid

The "Holy Grail" layout is a classic web design pattern: a header, a three-column middle section (left sidebar, main content, right sidebar), and a footer. CSS Grid makes this trivial with named grid areas.

.holy-grail {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main   aside"
    "footer  footer  footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 1rem;
}

.holy-grail > header { grid-area: header; }
.holy-grail > nav    { grid-area: sidebar; }
.holy-grail > main   { grid-area: main; }
.holy-grail > aside  { grid-area: aside; }
.holy-grail > footer { grid-area: footer; }

Card grid with auto-fill and minmax

This pattern creates a responsive card grid that automatically adjusts the number of columns based on available width. Each card has a minimum width of 280 pixels and expands to fill remaining space. No media queries are needed.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.card {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

Subgrid for aligned card content

When cards have headers and footers of varying length, aligning them across a row is difficult without subgrid. By making each card a subgrid that inherits the parent's row tracks, all headers, body text, and footers line up perfectly.

.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: subgrid;
  gap: 1.5rem;
}

.card-list > .card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

.card > .card-header  { /* Aligns to row 1 across all cards */ }
.card > .card-body    { /* Aligns to row 2 across all cards */ }
.card > .card-footer  { /* Aligns to row 3 across all cards */ }

Dashboard layout with spanning

Grid excels at dashboard-style layouts where certain panels span multiple columns or rows. This example creates a four-column dashboard where a featured widget takes up two columns and two rows.

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: 1rem;
}

.dashboard .featured {
  grid-column: span 2;
  grid-row: span 2;
}

.dashboard .widget {
  background: var(--surface);
  border-radius: 8px;
  padding: 1rem;
}

Common patterns and best practices

CSS Grid offers tremendous flexibility, but following a few best practices will keep your layouts maintainable and performant.

Use fr units for flexible columns. The fr unit distributes remaining space proportionally. 1fr 2fr gives the second column twice the space of the first, and they always fill the container together.
Prefer minmax() over fixed sizes. Hard-coded pixel widths break on different screen sizes. Use minmax(200px, 1fr) to set a floor without capping growth.
Use named grid areas for page layouts. Named areas like grid-template-areas: "header header" "sidebar main" make your layout structure immediately readable in the CSS.
Do not over-specify placement. Let the auto-placement algorithm handle item positioning where possible. Explicit placement is only needed for items that must span or appear out of source order.
Combine grid with flexbox. Use grid for the overall page structure and flexbox within grid cells for component-level alignment. Each tool has strengths: grid for two-dimensional placement, flexbox for one-dimensional distribution.
Test with subgrid for alignment. Whenever you have repeating components (cards, table rows, form fields) that need cross-item alignment, subgrid eliminates the need for fragile fixed heights or JavaScript calculations.

Browser support

CSS Grid (Level 1) has been supported in all major browsers since March 2017, including Chrome 57+, Firefox 52+, Safari 10.1+, and Edge 16+. It is one of the most broadly supported modern CSS features. Subgrid, part of CSS Grid Level 2, reached full cross-browser support in September 2023 when Chrome 117 shipped it, joining Firefox (which supported subgrid since version 71) and Safari (since version 16). You can use both grid and subgrid in production today without polyfills for any project targeting modern browsers. For legacy browser support, a simple @supports (grid-template-columns: subgrid) check lets you provide a fallback layout.

FAQ

What is subgrid?

Subgrid is a CSS Grid feature that allows a grid item to adopt its parent grid's row or column tracks as its own. Instead of defining a completely independent grid inside a nested element, you set grid-template-columns: subgrid or grid-template-rows: subgrid and the child aligns directly to the parent's grid lines. This eliminates the need to duplicate track sizes and ensures perfect alignment between parent and child grids — especially useful for card headers, footers, and complex form layouts.

When should I use grid instead of flexbox?

Use CSS Grid when you need to control layout in two dimensions — both columns and rows at the same time. Grid excels at page-level layouts, dashboard panels, card grids with consistent sizing, and any design where items need to align both horizontally and vertically. Flexbox is better suited for one-dimensional flows like navigation bars, button groups, or aligning items in a single row or column. In practice, most projects use both: grid for the overall structure and flexbox for component-level alignment within grid cells.

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

auto-fill creates as many tracks as will fit in the container and keeps empty tracks, preserving their space even when there are not enough items to fill them. auto-fit collapses empty tracks to zero width, allowing existing items to stretch and fill the remaining space. Use auto-fit when you want items to grow into available space, and auto-fill when you want to maintain a consistent column structure regardless of how many items are present.

How do I center items in a grid?

Use place-items: center on the grid container to center all items both horizontally and vertically within their grid cells. For a single item, use place-self: center on that specific item. If you want to center a single child in the entire grid container, a one-cell grid with display: grid; place-items: center is the simplest centering technique in CSS.

Can I use grid and flexbox together?

Yes, grid items can be flex containers and vice versa. A common pattern is to use grid for page-level layout (defining the overall structure of header, sidebar, main content, and footer) and flexbox for component-level alignment within each grid cell (centering icons next to text, distributing buttons evenly, or aligning items along a single axis). The two layout systems complement each other and are designed to be used together.

What is the difference between grid-template and grid-auto?

grid-template-columns and grid-template-rows define the explicit grid — tracks with fixed positions and sizes that you declare up front. grid-auto-columns and grid-auto-rows control the implicit grid — tracks that the browser creates automatically when items are placed outside the explicit grid or when there are more items than explicit tracks. For example, if you define two explicit rows but have six items in a two-column grid, the third row is created implicitly and sized according to grid-auto-rows.