CSS Grid becomes flexible when each column and row track is sized in fr units, which divide the container's free space proportionally rather than locking every track to a fixed pixel width. A track declared as 1fr claims one share of whatever space remains after fixed tracks, gutters, and padding are subtracted, so an eight-column grid written with repeat(8, 1fr) always divides the container into eight equal tracks regardless of viewport size. Adding minmax(0, 1fr) is the practical refinement that lets each track shrink to zero instead of being held open by its content's intrinsic minimum size, which is the single change that prevents a single long word or fixed-width image from blowing out an otherwise balanced grid. Understanding that distinction is what separates a rigid table-like layout from a layout that genuinely responds to its content, because the shorthand grid-template-columns: repeat(4, 1fr) looks identical to repeat(4, minmax(0, 1fr)) until long content forces the layout wider than the container itself.
Most hand-written CSS Grid snippets grow messy because authors repeat the same track function many times, mix incompatible units, or forget which property controls which axis. A bounded visual builder sidesteps that repetition: you describe the shape you want, see it rendered immediately, and copy a deterministic declaration. The CSS Grid Generator follows exactly that pattern by accepting whole-number column and row counts from one through twelve, a pixel gap from zero through one hundred, and four closed alignment values, then emitting a single .grid rule that uses the standard flexible-track pattern.
What "flexible" actually means in CSS Grid
Three CSS Grid features interact to produce a flexible layout, and each one solves a different problem.
- fr units divide free space. The browser subtracts fixed tracks, padding, and gaps from the container, then hands the remainder to every fr track in proportion to its number. A track written as 2fr claims twice as much leftover space as a track written as 1fr.
- repeat() collapses repeated track functions. repeat(6, 1fr) is equivalent to writing 1fr 1fr 1fr 1fr 1fr 1fr, but the shorthand stays readable when the count grows.
- minmax() sets a minimum and maximum size for a track. Writing minmax(0, 1fr) tells the browser that the track may shrink all the way to zero and may grow to whatever share of free space one fr would receive. Writing minmax(min-content, 1fr) instead would forbid the track from shrinking below its longest unbreakable word or fixed-size child, which is the most common cause of horizontal overflow on equal-track grids.
The combination of all three is the practical recipe for an equal flexible grid. The CSS Grid Generator always emits repeat(n, minmax(0, 1fr)) for both columns and rows, which is why its output behaves like a flexible grid out of the box and why switching to a hand-written 1fr-only declaration would subtly change the overflow behavior of long content. The generator never silently rewrites 101 into 100 or accepts decimals, so the track count and gap that appear in the copied rule are exactly the values that were requested.
Build a flexible grid with the generator
- Open the CSS Grid Generator and enter whole-number column and row counts between one and twelve. Four columns and three rows create a common product-card-style layout that still has room to grow.
- Type a pixel gap between zero and one hundred. A gap of sixteen pixels is a sensible starting point for content blocks; zero removes the gutter entirely when items should touch.
- Choose a justify-items value (stretch, start, center, or end) for the inline axis and an align-items value for the block axis. The live preview reflects every change immediately, so alignment can be tuned visually rather than guessed from the spec.
- Click Generate CSS to produce the validated .grid rule, then copy the snippet into a stylesheet. If the browser blocks clipboard access, the same text remains selectable for a manual copy.
Every control is validated before the CSS appears. Out-of-range numbers, signed values, decimals, whitespace-padded strings, unit-suffixed input, or text longer than thirty-two UTF-16 code units produce an explicit error and no generated code, so the snippet you copy is always well-formed. Editing any control clears the previous output, the previous error, and the copy status, which keeps the visible result in lockstep with the current inputs. The live preview resets to a documented three-column by two-row safe default whenever a field is invalid rather than displaying stale numbers, and every change re-renders both the preview and the generated CSS from the same validated configuration.
Reading the generated CSS
A typical four-column, three-row, sixteen-pixel gap, center-aligned configuration produces a .grid rule containing display: grid, grid-template-columns: repeat(4, minmax(0, 1fr)), grid-template-rows: repeat(3, minmax(0, 1fr)), gap: 16px, justify-items: center, and align-items: center. Each declaration has a specific job. display: grid establishes the grid formatting context, which is the prerequisite for every other grid property. grid-template-columns and grid-template-rows declare explicit tracks using repeat() so the count stays editable in one place. gap: 16px applies the same spacing between rows and columns; per-axis values such as column-gap and row-gap would be a manual extension. justify-items and align-items set the default alignment for every grid item along the inline and block axes respectively, which is why the four closed values the generator offers map cleanly onto everyday layout needs:
| Value | Inline-axis effect | Block-axis effect |
|---|---|---|
| stretch | Fills the cell's inline size when the item allows it | Fills the cell's block size when the item allows it |
| start | Pins the item to the inline-start edge | Pins the item to the block-start edge |
| center | Centers the item on the inline axis | Centers the item on the block axis |
| end | Pins the item to the inline-end edge | Pins the item to the block-end edge |
These controls align items inside their assigned cells. They are not justify-content or align-content, which move the entire group of tracks inside a larger container, and they do not assign grid-row, grid-column, or grid-area placement. Items still flow into cells in source order unless the markup or additional rules rearrange them, and named areas, implicit tracks, subgrid, masonry, and per-item alignment are out of scope for the generator by design.
When a flexible grid still overflows
Flexibility solves only part of the problem. A grid written with 1fr tracks can still overflow horizontally when a single cell holds a child that is wider than the track's default minimum, because the browser's default minimum for an fr track is its min-content size. A long URL, an unsplittable word, or a fixed-width image can therefore push one track past the container's edge and grow a horizontal scrollbar even when the rest of the grid looks balanced.
Switching the track function from 1fr to minmax(0, 1fr) removes that floor and lets the track shrink to zero. The CSS Grid Generator emits this pattern by default, which is why a generated grid tolerates long content more gracefully than a naive 1fr snippet. Authors should still add overflow-wrap, word-break, min-width: 0 on grid item children, or explicit max-width on media elements when individual cells hold media that needs its own overflow handling. The W3C CSS Grid Layout Module Level 2 describes the underlying track-size resolution algorithm, and MDN's gap reference documents how the gutter interacts with flexible tracks and other grid properties.
Beyond the generator: making the layout actually responsive
The generator produces one explicit grid, not an adaptive page layout. Authors who need different track counts at different viewport sizes should treat the generated snippet as a starting point and add a responsive layer on top of it. Several established patterns cover the common cases:
- Media-query breakpoints redefine grid-template-columns at named widths, switching from a four-column desktop layout to a two-column tablet layout and a single-column mobile layout.
- Container queries tie the track count to the size of the parent container rather than the viewport, which works well inside reusable card components that may be embedded at different widths on the same page.
- auto-fit and auto-fill patterns use repeat(auto-fit, minmax(180px, 1fr)) to let the browser decide how many tracks fit, which produces a naturally fluid grid without explicit breakpoints.
- Named areas with grid-template-areas rearrange the same tracks at different sizes, which is useful when the layout needs to reorder regions visually without changing source order.
None of these patterns are emitted by the generator. The bounded builder accepts only whole-number track counts from one through twelve and one pixel gap from zero through one hundred, so adapting the result to a real responsive design is always an authoring step that follows the copy. The generated .grid rule is also deterministic rather than escaped: column count, row count, gap, and alignment values are validated against fixed enums before any string is produced, and property names, punctuation, and units are fixed by the implementation. That determinism is what keeps the output safe to paste into a stylesheet without further sanitization.
For a from-scratch workflow that walks through the same generator with a different framing, see Make a CSS Grid in Minutes with a Live Generator. When the target shape is a three-by-three cell grid specifically, the How to Make a 3x3 Grid in CSS walkthrough covers that exact shape using the same tool.
A flexible grid is not a complete layout on its own. Add semantic HTML first, layer accessibility-friendly source order on top of any visual reordering, and treat the generator's output as a clean foundation rather than a finished page. That sequence keeps the layout responsive, the markup meaningful, and the CSS short enough to maintain.