CSS Grid Generator

CSS Grid ready

CSS selector:

Use a class, ID, element, or selector list for the grid container.

Grid strategy:

Choose responsive tracks or a fixed column count.

Minimum track width:

Each card keeps at least this width before wrapping to a new row.

Columns:

Fixed grids use repeat(columns, minmax(0, 1fr)).

Row gap:

Vertical spacing between rows.

Column gap:

Horizontal spacing between columns.

Item alignment:

Align each item within its grid area.

Guard narrow containers

Wraps the min track in min(100%, value) so the grid does not overflow tiny containers.

Auto rows:

Row sizing for generated rows beyond explicit templates.

Auto flow:

Placement direction for auto-placed items.

Content alignment:

Align the whole grid when the container has spare space.

Include featured item span

Adds a child rule for .grid-item--feature with a two-column span.

Preview items:

Number of sample grid children used for preview and scaffold.

{{ cssCode }}

Scope	Property	Value	Implementation note	Copy
{{ row.scope }}	`{{ row.property }}`	`{{ row.value }}`	{{ row.note }}

Container	Strategy	Projected columns	Preview rows	Fit note	Copy
{{ row.container }}	{{ row.strategy }}	{{ row.columns }}	{{ row.rows }}	{{ row.note }}

{{ htmlScaffold }}

Export to PDF Fullscreen

Embed:

Customize

Include current inputs

Size

Advanced

Width

Height

Aspect ratio

Max height

Collapsible embed

Allow fullscreen

Referrer policy

Sandbox tokens

CSS Grid is built for two-dimensional layout: rows and columns can both matter, and direct children become grid items inside a grid container. It is a good fit for card galleries, dashboards, form summaries, pricing blocks, media lists, and other layouts where spacing and column behavior need to stay predictable as the container changes width.

Most responsive grid snippets use a repeating column pattern such as repeat(auto-fit, minmax(220px, 1fr)). The minimum value says when an item should stop shrinking, while 1fr lets the columns share remaining width. The difference between auto-fit and auto-fill matters when the container has room for more columns than there are items.

Responsive CSS Grid tracks share remaining width while fixed columns keep equal fractions

Fixed columns still have a place. A known four-column admin panel can use equal fractions without changing the column count. A content-heavy card list usually needs a minimum track width, row and column gaps, and a narrow-container guard so the layout wraps before cards become unreadable.

Generated grid CSS should be treated as a starting rule, not a guarantee that every component will look finished. Real content length, images, writing direction, and nested layout rules can still change the final shape, so the copied CSS belongs in the actual component before release.

Technical Details:

A grid container establishes a grid formatting context for its direct children. Column tracks are sized by grid-template-columns, row tracks can be explicit or implicit, and gaps are separate spacing between tracks rather than padding inside each item.

The common responsive pattern combines repeat(), minmax(), and the fr unit. minmax(min, 1fr) keeps each column at or above the chosen minimum and lets it expand into a share of the remaining inline size. auto-fit collapses empty repeated tracks after placement, while auto-fill keeps empty repeated tracks reserved.

The fit projection uses container width, minimum track width, column gap, and item count to estimate how many columns can appear at several common widths. The formula below explains the responsive calculation before auto-fit caps empty tracks by the item count.

columns = ⌊ \frac{container + gap}{minimum + gap} ⌋

For fixed grids, the column count is entered directly and the generated value uses repeat(columns, minmax(0, 1fr)). The minmax(0, 1fr) pattern reduces content blowouts because the flexible track is allowed to shrink below an item's intrinsic minimum when the item itself can wrap or scroll.

Grid Strategy Map:

CSS Grid strategy behavior for generated column rules
Strategy	Column Rule Shape	Result Meaning
`auto-fit`	`repeat(auto-fit, minmax(min, 1fr))`	Cards wrap at the minimum width, and empty repeated tracks collapse after items are placed.
`auto-fill`	`repeat(auto-fill, minmax(min, 1fr))`	The browser reserves repeated tracks that fit the container, even when there are fewer items.
`fixed`	`repeat(n, minmax(0, 1fr))`	The column count stays exact, and each column receives an equal fraction of the available width.

grid-auto-flow controls the placement direction for auto-placed items. row fills each row before adding another row, column fills down columns, and dense may backfill earlier holes when a later item fits. Dense placement can change visual order, so it should be used with care when reading order matters.

Alignment properties change where content sits after tracks and grid areas already exist. place-items aligns each child inside its own grid area, while place-content aligns the whole grid when the container has extra block or inline space.

Everyday Use & Decision Guide:

For card layouts, start with Responsive auto-fit, a minimum track width near the smallest comfortable card width, matching row and column gaps, and Guard narrow containers turned on. That combination produces a copy-ready rule that wraps without needing a media query for the first pass.

Use Responsive auto-fill when reserved empty columns are useful for maintaining rhythm, such as placeholders or template slots. Use Fixed columns when the layout has a known column count and should not reflow based on content count.

Use CSS selector for the container rule that should receive display: grid.
Set Minimum track width when responsive modes are selected, or Columns when fixed mode is selected.
Set Row gap and Column gap separately when vertical and horizontal spacing should differ.
Use Item alignment only when children should not stretch inside their grid areas.
Open Advanced for implicit row sizing, auto-placement direction, whole-grid alignment, a featured-item span rule, and preview item count.

Grid CSS is the main output. Grid Preview gives a fast visual check, Property Ledger explains each emitted declaration, Fit Ledger estimates columns and rows across common widths, and HTML Scaffold creates sample markup for the chosen selector. The JSON tab is useful when another workflow needs the normalized settings and generated text together.

Before copying, compare the summary badges with the result tab you plan to use. If the selector was pasted from a full CSS rule, remove declarations and leave only the selector so the generated rule starts with the intended container.

Step-by-Step Guide:

Enter CSS selector. A class such as .card-grid produces a matching rule and a class-based scaffold, while an ID such as #results-grid produces an ID wrapper.
Choose Grid strategy. Pick Responsive auto-fit for most content grids, Responsive auto-fill for reserved columns, or Fixed columns for an exact count.
Set either Minimum track width with its unit or Columns. Check the headline summary to confirm the mode and width or count changed as expected.
Set Row gap, Column gap, and Item alignment. The generated rule uses one gap value when both gaps match and two values when they differ.
Open Advanced when needed. Guard narrow containers wraps the minimum track in min(100%, value), Auto flow controls placement direction, and Include featured item span adds a child rule for a two-column feature card.
Review Grid Preview and Fit Ledger. If query values or pasted values exceed allowed ranges, the generated result uses normalized numbers within the accepted limits.
Copy or download from Grid CSS, then use HTML Scaffold only if sample children help you test the layout in a component.

Interpreting Results:

Check the final CSS rule first. display: grid, grid-template-columns, and gap are the core declarations; the advanced declarations appear only when their selected values differ from the defaults.

Property Ledger is the audit view for the generated declarations. It shows why grid-auto-rows, grid-auto-flow, place-items, place-content, or the featured span rule appears, which helps catch accidental advanced settings before copying.

Fit Ledger is an estimate for listed container widths, not a browser compatibility test. It converts rem and em as 16 pixels, ch as 8 pixels, and percentages against the listed container width. Use it to compare settings, then test the CSS in the actual component.

A neat preview does not prove the final page is finished. Long words, images with fixed sizes, nested flex or grid children, and component-specific overflow rules can still force extra work after the generated rule is pasted.

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 the narrow guard on, Grid CSS should include repeat(auto-fit, minmax(min(100%, 220px), 1fr)). At a 1024px container width with eight preview items, Fit Ledger should project four columns and two rows.

An editorial index with reserved slots can switch to Responsive auto-fill, use 16rem as the minimum track width, and set both gaps to 1rem. The CSS remains responsive, but Fit Ledger is allowed to show columns that exceed the current item count because empty repeated tracks remain reserved.

A metrics panel with a known four-column desktop layout 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 the fit rows change only when the preview item count changes.

If a pasted selector looks like .cards { gap: 1rem; }, review the generated rule before copying. Replace it with .cards so declarations are not accidentally mixed into the selector field.

FAQ:

Should I choose auto-fit or auto-fill?

Choose auto-fit when you want existing items to stretch into available width. Choose auto-fill when the grid should keep reserved empty repeated tracks.

Why does the narrow guard add min(100%, value)?

Guard narrow containers wraps the minimum track so the generated responsive grid can shrink to the container width before wrapping, which helps avoid tiny-container overflow.

Does dense auto flow change item order?

row dense and column dense may visually backfill gaps with later items. The DOM order stays the same, but the visual order can differ.

Can I use the scaffold as production markup?

HTML Scaffold is sample markup based on the selector and preview item count. Replace the sample item labels with real component markup before release.

Does the CSS need to be sent to a server?

No server request is needed to build the CSS, preview, ledgers, scaffold, or JSON. The generator runs those actions in the browser page.

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 rows and columns.
fr: A flexible unit that takes a share of remaining 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:

grid-template-columns CSS property, MDN Web Docs, Apr 20, 2026.
CSS Grid Layout Module Level 2, W3C.