Define columns, rows, gaps and alignment in the sidebar, watch the live preview update, then copy the CSS (or Tailwind / SCSS) in one click. The generator supports fr units, px, auto, minmax() and repeat() — everything you'd write by hand, without the guesswork.
grid-template-columns value. Mix fr, px, auto, minmax() and repeat() freely.justify-items controls horizontal alignment inside cells, align-items controls vertical alignment.grid-template-columns defines how many columns your grid has and how wide each one is. You can pass a space-separated list of track sizes. The most common units are fr (fractional), px, %, auto and the minmax() function.
.container {
display: grid;
grid-template-columns: 250px 1fr 1fr;
/* fixed sidebar + two equal fluid columns */
}
grid-template-rows works the same way but for vertical tracks. Use auto for content-sized rows or fixed values for explicit heights.
.container {
display: grid;
grid-template-rows: 80px 1fr 60px;
/* header + main + footer */
}
fr stands for "fraction of remaining space." After fixed tracks are calculated, the remaining space is split proportionally among fr tracks. 1fr 2fr gives the second column twice the space. 1fr 1fr 1fr splits evenly into thirds. You can mix fr with px freely — 300px 1fr is a fixed sidebar with a fluid main area.
The gap shorthand sets spacing between grid tracks without adding margins to individual items. gap: 16px sets both row and column gaps. gap: 20px 16px sets row-gap first, column-gap second. Gap respects the grid's boundaries — it never adds space at the outer edges, only between tracks.
By default items fill cells left-to-right, top-to-bottom (auto-placement). To place an item explicitly, use grid-column and grid-row:
.sidebar {
grid-column: 1 / 2; /* spans column line 1 to 2 */
grid-row: 1 / 3; /* spans two rows */
}
The most powerful CSS Grid pattern for responsive design is repeat(auto-fit, minmax(250px, 1fr)). This creates as many columns as fit at a minimum of 250px, expanding them equally to fill leftover space. Items wrap automatically when the viewport narrows — no @media rules needed.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
CSS Grid is two-dimensional — it controls rows and columns simultaneously. Flexbox is one-dimensional — it controls items along a single axis (row or column). Use Grid when you need a full page layout, a card grid or any layout where row and column alignment matters together. Use Flexbox when you need a nav bar, a row of buttons, centering a single item, or controlling spacing along one direction. In practice most projects use both: Grid for page structure, Flexbox for component internals.
Subgrid lets a nested grid item inherit the track definitions of its parent. Instead of defining its own columns/rows, a child says grid-template-columns: subgrid and aligns to the parent's grid lines. This is invaluable for card layouts where each card's heading, body and footer need to align across cards. Subgrid is supported in Chrome 117+, Firefox 71+, Safari 16+ and Edge 117+.
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3; /* participate in 3 parent rows */
}
CSS Grid Layout is supported in all modern browsers. Global usage is above 97% (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+). The gap property in grid contexts has equivalent support. Subgrid has narrower but solid support: Chrome 117+, Firefox 71+, Safari 16+, Edge 117+.
CSS Grid is a two-dimensional layout system built into CSS that lets you define rows and columns simultaneously, place items precisely on the grid, and build complex page layouts without floats or positioning hacks.
The fr (fraction) unit represents a share of the available space in the grid container. For example, grid-template-columns: 1fr 2fr creates two columns where the second is twice as wide as the first.
Use repeat(auto-fit, minmax(250px, 1fr)) for your grid-template-columns. Items will automatically wrap to new rows when the container is too narrow, with no media queries needed.
CSS Grid is two-dimensional (rows and columns at once) while Flexbox is one-dimensional (row or column). Use Grid for page-level layouts and card grids; use Flexbox for navigation bars, centering, and single-axis alignment.
Subgrid lets a nested grid item inherit the row or column tracks of its parent grid, so child elements can align to the outer grid lines. Use grid-template-columns: subgrid or grid-template-rows: subgrid on the child.
Yes. CSS Grid is supported in all modern browsers including Chrome, Firefox, Safari and Edge. Global support is above 97%. Subgrid support is slightly lower but covers Chrome 117+, Firefox 71+, Safari 16+ and Edge 117+.
Want to learn more about modern CSS layouts? Read our Complete Guide to Modern CSS Layout →