CSS Grid Generator

Card galleries, dashboards, feature lists, and media indexes often fail for the same reason: the layout was sized for one container width and then asked to survive another. Cards become too narrow, gaps consume more space than expected, or a four-column desktop block creates overflow on a phone.

CSS Grid gives direct children a two-dimensional layout context, so columns, rows, gaps, and item spans can be reasoned about together. That makes it a better fit than one-dimensional flow when the design needs aligned rows and columns rather than only a row of items that wraps.

Responsive grid design starts with a track rule. A minimum track width protects each card from collapsing into a thin strip, while a flexible maximum such as 1fr lets the browser divide leftover space. Gaps count against the available width, so a layout that fits four cards with a small gap can drop to three cards when the gap grows.

auto-fit and auto-fill share the same auto-repeat idea but differ when the container can hold more repeated tracks than there are items. auto-fit collapses empty repeated tracks after placement, letting existing items stretch. auto-fill keeps the empty tracks reserved, which helps slot-like layouts keep their rhythm.

A grid rule is still only a layout skeleton. Long unbreakable words, fixed-width media, nested components, visual reordering, and dense placement can still cause overflow or accessibility problems. Good grid settings survive real content, not only sample boxes.

How to Use This Tool:

Start with the layout strategy, then use the preview and ledgers to check whether the generated rule matches the component width and item count you expect.

1. Enter CSS selector. A simple class or ID also shapes the wrapper in HTML Scaffold; complex selectors still work for Grid CSS but use a generic scaffold wrapper.
2. Choose Grid strategy. Use Responsive auto-fit for most card grids, Responsive auto-fill when empty slots should stay reserved, or Fixed columns when the design needs an exact count.
3. Set Minimum track width in responsive modes, or set Columns in fixed mode. The summary updates to show the current strategy and width or count.
4. Set Row gap, Column gap, and Item alignment. Equal row and column gaps become one gap value; unequal gaps use row gap first and column gap second.
5. Open Advanced when the container rule needs more detail. Guard narrow containers wraps the minimum track in min(100%, value), Auto rows sets implicit row sizing, Auto flow changes placement direction, Content alignment handles spare container space, and Include featured item span adds a two-column child rule.
6. Review Grid Preview, Property Ledger, and Fit Ledger, then copy from Grid CSS when the rule matches the layout goal.

If a selector was pasted with braces, declarations, or semicolons, clean it back to the selector before copying. Numeric inputs are bounded, so check the summary and generated CSS when a typed value lands outside the accepted range.

Interpreting Results:

Check Grid CSS first because it is the stylesheet rule to paste. The core declarations are display: grid, grid-template-columns, and gap. Optional declarations appear only when a non-default advanced setting changes the output.

Grid Preview is a fast visual check, not a final responsive proof. Use it to catch obvious wrapping, gap, alignment, and featured-span issues before testing the rule against real cards, images, headings, and container widths.

Fit Ledger estimates projected columns and preview rows at common container widths. Treat it as planning guidance: it uses the current minimum track, item count, and gap settings, but real fonts, media constraints, and parent layout rules can still change the final rendering.

Property Ledger explains each emitted declaration. If the ledger includes grid-auto-flow with a dense value, review keyboard and reading order in the final page because dense visual packing can make later items appear earlier on screen.

Technical Details:

A grid container establishes a grid formatting context for its direct children. Column tracks come from grid-template-columns, implicit rows are added as auto placement needs them, and gaps sit between tracks rather than inside each item. The fr unit divides leftover inline space after fixed sizes, minimums, and gaps are accounted for.

The common responsive pattern combines repeat(), an auto-repeat keyword, and minmax(). The minimum part prevents each track from becoming smaller than the chosen width. The maximum part, usually 1fr, lets each repeated track share remaining space once the browser has determined how many tracks fit.

Formula Core:

The fit projection uses a simple planning estimate for responsive grids. It is not the browser's full track sizing algorithm, but it gives a useful column count before testing the rule in the final component.

For auto-fit, projected columns are capped by the preview item count because empty repeated tracks collapse after placement. For auto-fill, projected columns can exceed the current item count because empty repeated tracks remain. In fixed mode, projected columns equal the entered column count.

The narrow-container guard changes the minimum from a bare length to min(100%, value). That allows a single responsive track to shrink to the container width before overflow appears in very small containers.

rem and em values are converted as 16 pixels for fit projections, ch is converted as 8 pixels, and percentages are interpreted against the projected container width. These conversions keep the ledger predictable, but final browser rendering can differ when fonts, root size, or component constraints differ.

grid-auto-flow controls auto placement direction. row fills across rows first, column fills down columns first, and dense values may backfill earlier holes when later items fit. Dense placement can change visual order while the document source order stays unchanged, so it needs review before production use.

Worked Examples:

A product card gallery can use .product-grid, Responsive auto-fit, a 220px minimum track width, and 24px row and column gaps. With Guard narrow containers on, Grid CSS includes repeat(auto-fit, minmax(min(100%, 220px), 1fr)). At a 1024px projection with eight preview items, Fit Ledger should show four columns and two rows.

An editorial index that should preserve empty slots can switch to Responsive auto-fill, set the minimum track width to 16rem, and use 1rem gaps. Grid CSS remains responsive, but Fit Ledger may show more projected columns than preview items because empty repeated tracks stay reserved.

A metrics block with a known four-column shape can use Fixed columns set to 4, 16px gaps, and center item alignment. Grid CSS should include repeat(4, minmax(0, 1fr)) and place-items: center;, while Property Ledger confirms the alignment declaration.

If HTML Scaffold does not use the wrapper you expected, simplify the selector. A selector such as .cards or #cards can become matching wrapper markup, while a complex selector list still belongs in Grid CSS but falls back to a generic scaffold wrapper.

FAQ:

Glossary:

Grid container

The element with display: grid that creates the layout context.

Grid item

A direct child of the grid container.

Track

A row or column in the grid.

Gap

The space between grid rows and columns.

fr

A flexible unit that takes a share of leftover space in the grid container.

minmax()

A CSS function that sets the minimum and maximum size for a track.

auto-fit

An auto-repeat mode that collapses empty repeated tracks after placement.

auto-fill

An auto-repeat mode that keeps repeated tracks reserved when they fit the container.

References:

• CSS Grid Layout Module Level 2, W3C.
• Basic concepts of grid layout, MDN Web Docs.
• grid-template-columns CSS property, MDN Web Docs.
• repeat() CSS function, MDN Web Docs.