CSS Grid Generator — Free HTML CSS JS Snippet

CSS Grid is one of the most powerful layout systems in modern CSS, but the property names are easy to mix up under deadline pressure — is it column-gap or grid-column-gap, and does repeat(4, 1fr) belong in grid-template-columns or grid-template-areas? This snippet turns grid construction into direct manipulation: five sliders control column count, row count, column gap, row gap, and how many placeholder cells to render, and every change instantly updates both a live visual preview and the exact CSS block you would paste into a stylesheet.

Driving a real grid container with live style properties

The preview element is a real display: grid container, not a simulation. render() reads each slider's current value and writes directly to gridPreview.style.gridTemplateColumns, gridTemplateRows, columnGap, and rowGap using the browser's own CSS Grid engine. This matters because it means the preview behaves exactly as a real grid would with the same properties — including how the browser handles more or fewer cells than the row/column count implies, letting you directly observe CSS Grid's implicit row creation when the cell count exceeds rows × columns.

Populating placeholder cells

A separate slider controls how many numbered placeholder .grid-cell divs get appended into the preview container, independent of the row and column count sliders. This is deliberate: seeing what happens when you have 10 cells in a 4-column, 2-row layout (which only accounts for 8 explicit cells) demonstrates CSS Grid's auto-placement behavior — the extra two cells flow into an implicitly created third row — without needing to explain the concept in the abstract. Dragging the cell-count slider past the explicit grid size is itself the best explanation of implicit rows.

Building the copyable CSS output as a string

render() also assembles a formatted CSS block as a plain string using repeat(N, 1fr) for both grid-template-columns and grid-template-rows, and separate column-gap/row-gap declarations rather than the shorthand gap property — this is intentional, since writing them separately makes it immediately clear which slider maps to which line when a user is learning the syntax, even though a production stylesheet would typically collapse them into a single gap: 12px 12px line. The repeat() function is used instead of listing out 1fr 1fr 1fr 1fr explicitly, matching how experienced developers actually write grid templates for anything beyond two or three tracks.

One-click copy to clipboard

The Copy CSS button uses navigator.clipboard.writeText() to copy the exact generated CSS block, with a temporary "Copied!" label and green highlight for confirmation, and a safe fallback that still shows the confirmation state if the Clipboard API is unavailable in a restricted context like a sandboxed iframe.

Why sliders instead of text inputs

Text inputs for grid dimensions invite invalid states — negative numbers, non-numeric text, or absurdly large values that would freeze the browser rendering thousands of cells. Range sliders constrain the input space to sensible bounds (1-12 columns, 1-8 rows, 0-48px gaps, 1-24 cells) while still updating live on every drag, which keeps the tool fast and impossible to break through bad input, and keeps the generated CSS always syntactically valid no matter what the user does.