nutilz
⊞

CSS Grid Generator

Build CSS grid layouts visually — copy the generated code instantly

Column Widths

Col 1
Col 2
Col 3

Row Heights

Row 1
Row 2
Row 3

Generated CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 16px;
}

.grid-item {
  /* add your item styles here */
}

Live Preview (9 cells)

1
2
3
4
5
6
7
8
9

🔒 No upload — runs entirely in your browser. Your data never leaves your device.

Related Tools

⬡

CSS Flexbox Generator

Build CSS flexbox layouts visually — copy the generated CSS instantly.

□

Box Shadow Generator

Build CSS box shadows visually with multiple layers and presets.

🌈

CSS Gradient Generator

Build linear, radial and conic CSS gradients visually.

px

PX to REM Converter

Convert pixels to rem with configurable base font size.

⚡

Color Contrast Checker

Check WCAG AA and AAA color contrast ratios.

Browse all Design Tools tools →

What is CSS Grid?

CSS Grid is a two-dimensional layout system built directly into CSS that lets you define rows and columns and place elements into them precisely. Before CSS Grid, developers relied on floats, inline-blocks, and table hacks to achieve multi-column layouts — techniques that were brittle, verbose, and required reordering the HTML to match the desired visual output. CSS Grid eliminates all of that by separating the layout concern from the content concern: you define the grid in CSS, then assign elements to grid tracks without touching the HTML structure.

A CSS grid is defined on a container element using display: grid. The grid-template-columns and grid-template-rows properties establish the column and row tracks. Child elements automatically fill these tracks in document order, or you can explicitly place them using grid-column and grid-row.

CSS Grid has over 97% browser support across all modern browsers and is fully supported in Chrome, Firefox, Safari, and Edge. It is the W3C-recommended approach for two-dimensional layout and is used in the design systems of companies like GitHub, Stripe, and Shopify.

How to Use This CSS Grid Generator

  1. 1.Set the number of columns (1–12) and rows (1–6) using the sliders or plus/minus buttons. The live preview updates immediately.
  2. 2.Adjust each column width and row height in the size inputs. Type any valid CSS value — 1fr, 200px, auto, minmax(100px,1fr) — or pick a preset from the dropdown.
  3. 3.Set the column gap and row gap with the sliders. When both values are equal, the generator outputs the shorthand gap property.
  4. 4.Choose align-items to control vertical alignment within cells, and justify-items to control horizontal alignment.
  5. 5.Click Copy CSS to copy the generated code to your clipboard and paste it directly into your stylesheet.

Understanding grid-template-columns

grid-template-columns is the most important CSS Grid property. It defines how many columns your grid has and how wide each one is. The value is a space-separated list of track sizes — one size per column. You can use virtually any CSS length unit, but the most common values are:

  • 1fr — one fraction of available space. 1fr 1fr 1fr creates three equal columns.
  • 200px — a fixed pixel width that does not respond to container size.
  • auto — sizes the column to its content width.
  • repeat(3, 1fr) — shorthand for 1fr 1fr 1fr; avoids repetition when you have many equal columns.
  • minmax(100px, 1fr) — each column is at least 100px wide and can grow to fill available space.

A common pattern for sidebar layouts is 250px 1fr: a fixed 250px sidebar and a flexible main content area. For a Holy Grail layout with two sidebars, use 200px 1fr 200px. You can mix units freely — 200px repeat(3, 1fr) 200px creates a fixed sidebar on each end with three equal center columns.

The fr Unit: Flexible Layout Made Simple

The fr unit (fractional unit) is unique to CSS Grid and is how the spec solves the problem of proportional space distribution. After all fixed-width columns and gaps are subtracted from the container's total width, the leftover space is divided among the fr columns according to their ratio.

Example: a 900px container with three columns of 1fr 2fr 1fr and a 16px gap between each. The two gaps consume 32px, leaving 868px. The total fr count is 4, so each fr is worth 217px. Column 1 gets 217px, column 2 gets 434px, column 3 gets 217px.

The fr unit is why CSS Grid replaced the percentage-based approaches of the Bootstrap era. With percentages, you had to manually subtract gutters and account for box-sizing. With fr, the browser handles all of that math automatically. The equivalent of a 12-column Bootstrap grid is simply repeat(12, 1fr).

Grid Template Rows and Row Heights

grid-template-rows works identically to grid-template-columns, but for the vertical axis. The most common row value is auto, which means rows size to their content — the row is as tall as the tallest item it contains. This is the default behavior when you omit grid-template-rows entirely.

Set rows to 1fr when you want all rows to be equal height and fill the container. This is useful for full-height layouts such as dashboards. Use minmax(100px, auto) to set a minimum row height while still allowing rows to grow with their content — useful for card-based layouts where some cards may have more text than others but you want a consistent minimum size.

A classic page layout uses three rows: auto 1fr auto. The header (auto) sizes to its content, the main content area (1fr) expands to fill all remaining height, and the footer (auto) sizes to its content — achieving a sticky footer with a single CSS property.

Gap, Column Gap, and Row Gap

The gap property (formerly grid-gap) sets the space between grid tracks. It does not add space at the outer edges of the grid — only between cells. This makes it simpler than adding margins or padding to each cell, which could cause alignment issues at the edges of the container.

gap: 16px sets both column and row gaps to 16px. To set them independently, use column-gap and row-gap. This generator automatically uses the shorthand gap when both values are equal, and outputs separate column-gap and row-gap properties when they differ. Common design gap values are 8px (tight), 16px (standard), 24px (spacious), and 32px (magazine-style).

Aligning Grid Items with align-items and justify-items

CSS Grid has two axes of alignment for items within their cells. align-items controls the vertical (block) axis, and justify-items controls the horizontal (inline) axis. Both accept the same four values:

  • stretch (default) — the item stretches to fill the entire cell in that axis.
  • start — the item aligns to the top (align) or left (justify) edge of the cell.
  • center — the item centers in the cell on that axis.
  • end — the item aligns to the bottom (align) or right (justify) edge of the cell.

The shorthand place-items: center center — or simply place-items: center — centers all items in both axes simultaneously. This is the cleanest way to create a centered icon grid. These properties control item alignment within cells; use align-content and justify-content if you want to align the grid tracks themselves within the container.

CSS Grid vs. Flexbox: Choosing the Right Tool

The most common confusion among developers new to modern CSS is when to reach for CSS Grid versus Flexbox. The simple rule: use Flexbox for one-dimensional layouts (a single row of buttons, a horizontal navigation bar, a column of stacked form fields) and use CSS Grid for two-dimensional layouts (a dashboard with rows and columns, a photo gallery, a page template with header/sidebar/main/footer regions).

The key structural difference: in Flexbox, items flow along one axis and can wrap to a new line, but each line is independent — items in two different lines have no relationship to each other. In CSS Grid, items in different rows and columns can align with each other because the grid tracks are shared. This is why consistent card heights in a product listing require CSS Grid: the tracks enforce that all cards in the same row reach the same height, regardless of their content.

The two systems are complementary, not competing. Use CSS Grid to create the macro layout of a page or component, then use Flexbox inside individual grid cells to arrange content within them. A navigation header, for example, might use CSS Grid for the three-column layout (logo | nav links | CTAs) but Flexbox inside each cell to vertically center and space the individual items.

Responsive Grids Without Media Queries

One of CSS Grid's most powerful features is intrinsic responsiveness — creating layouts that adapt to the container width without any @media queries. The technique uses repeat(auto-fit, minmax(MIN, 1fr)):

  • auto-fit — creates as many column tracks as fit, then collapses any empty tracks.
  • minmax(200px, 1fr) — each column is at least 200px wide and stretches to fill available space.

The result: on a 1200px screen, a minmax(200px, 1fr) grid shows 5–6 columns. On a 600px screen, it shows 2–3 columns. On a 320px mobile screen, it shows 1 column. Zero media queries, zero breakpoint math. This is the right starting point for most product card grids, team photo galleries, and feature highlight sections.

If you want items to maintain equal-width columns without the last row stretching to fill empty space, use auto-fill instead of auto-fit. With auto-fill, empty column tracks are preserved at the original minimum width, keeping the columns consistent across all rows.

Common CSS Grid Layout Patterns

Sidebar layout

grid-template-columns: 260px 1fr;

Fixed left sidebar, flexible main content. Swap to 1fr 260px for a right sidebar.

Holy Grail (header, two sidebars, main, footer)

grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;

Three-column page template with header and footer spanning all columns via grid-column: 1 / -1.

Card grid (responsive)

grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

Adapts from 1 column on mobile to 4+ columns on wide screens. No media queries.

Dashboard grid

grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(6, 100px);

12-column, 6-row dashboard base. Widgets span multiple columns and rows using grid-column: span 4.

Frequently Asked Questions

What is CSS Grid and why should I use it?+
CSS Grid is a two-dimensional layout system built into CSS that lets you place elements in rows and columns simultaneously. Unlike older layout methods that required floats, hacks, or nested flexbox containers, CSS Grid gives you direct control over both dimensions of a layout in a single step. You should use it when you need to create page-level layouts with distinct regions (header, sidebar, main content, footer), image galleries with varying card sizes, or any design that involves alignment across both rows and columns at the same time. CSS Grid has over 97% browser support as of 2025 and is the recommended approach for two-dimensional layouts in modern web development.
What is the difference between CSS Grid and Flexbox?+
Flexbox is a one-dimensional layout tool — it aligns items along a single axis, either a row or a column. CSS Grid is two-dimensional — it controls layout in both the horizontal and vertical directions at the same time. Use Flexbox to lay out a navigation bar, a row of buttons, or a list of items that should wrap naturally. Use CSS Grid to create a full page layout, a product card grid with consistent row heights, or any design where items need to align across both rows and columns. In practice, the two systems complement each other: use CSS Grid for the macro layout of a page, and Flexbox for the micro layout within individual components or cells.
How does grid-template-columns work?+
The grid-template-columns property defines the number and width of columns in your grid. You list the width of each column separated by spaces: grid-template-columns: 200px 1fr 200px creates three columns — a fixed 200px left column, a flexible center column that takes all remaining space, and a fixed 200px right column. You can use any valid CSS length unit (px, em, rem, %, vw), the fr fractional unit, the auto keyword, or the minmax() function. The repeat() shorthand avoids repetition: repeat(3, 1fr) is equivalent to 1fr 1fr 1fr. You can also mix units freely: repeat(3, 1fr) 200px creates three equal flexible columns followed by one fixed 200px column.
What does the fr unit mean in CSS Grid?+
The fr unit stands for fraction of the available space. After any fixed-width columns or gaps are subtracted from the container's total width, the remaining space is divided among the fr units in proportion to their values. For example, in a container that is 900px wide with a 16px gap and two columns of 1fr 2fr, the available space is 900 minus 16 equals 884px. The first column gets 884 times (1 divided by 3), approximately 295px, and the second gets 884 times (2 divided by 3), approximately 589px. The fr unit is the most common value for creating evenly spaced responsive columns. Using repeat(N, 1fr) creates N equal-width columns that share all available space after gaps are subtracted.
How do I center content in a CSS Grid cell?+
To center content inside every grid cell, add align-items: center (vertical centering) and justify-items: center (horizontal centering) to the grid container. This centers all child items within their individual cells. To center just one specific item, use align-self: center and justify-self: center on that item directly. To center a grid item both horizontally and vertically with a single property, use place-items: center on the container, which is the shorthand for both align-items and justify-items together. This is different from centering the entire grid itself inside its parent container, which requires applying align-self or margin: auto to the grid container element.
How do I make a responsive CSS grid without media queries?+
Use the auto-fill or auto-fit keywords with the minmax() function in grid-template-columns. The pattern grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) creates as many columns as fit inside the container at a minimum of 200px each, then stretches them equally to fill the row. The difference between auto-fill and auto-fit: auto-fill preserves empty column tracks at the end of the row, while auto-fit collapses them so the filled tracks expand to use all available space. For most responsive card grids, auto-fit with minmax() is the preferred approach — columns shrink to one per row on mobile and expand to fill available columns on wider screens, all with no media queries required.