Define columns, rows, gaps and alignment in the sidebar, watch the live preview update, then copy CSS, HTML, Tailwind or SCSS in one click. Toggle "Make Responsive" to generate auto-fit + minmax() code with a media-query fallback — no guesswork needed.
grid-template-columns value. Mix fr, px, auto, minmax() and repeat() freely.justify-items controls horizontal placement inside cells, align-items controls vertical placement.repeat(auto-fit, minmax(Npx, 1fr)) with a single-column fallback below your chosen breakpoint.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 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 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;
}
The difference between auto-fit and auto-fill: both create as many tracks as fit the container. auto-fill keeps empty tracks in place, preserving the grid structure even with few items. auto-fit collapses empty tracks to zero, letting items expand. For most card or gallery layouts, auto-fit is the better choice.
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.
CSS Grid is two-dimensional — it controls rows and columns simultaneously. Flexbox is one-dimensional — it controls items along a single axis. Use Grid for full page layouts, card grids, and any layout where row and column alignment matters together. Use Flexbox for nav bars, buttons, centering and single-axis spacing. 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. Supported in Chrome 117+, Firefox 71+, Safari 16+ and Edge 117+.
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 and minmax() have equivalent support. Subgrid has narrower but solid support across modern evergreen browsers.
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.
auto-fill keeps empty tracks in place, preserving grid structure even with few items. auto-fit collapses empty tracks to zero, letting items expand to fill remaining space. For most card layouts, auto-fit is more useful.
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.
Yes. CSS Grid is supported in all modern browsers including Chrome, Firefox, Safari and Edge. Global support is above 97%. Subgrid 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 →