Skip to content
Lizely

CSS Grid Generator

Build a bounded CSS Grid with explicit columns, rows, gap, and item alignment, preview it live, and copy standards-based declarations.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Enter whole-number column and row counts from 1 through 12 and a pixel gap from 0 through 100.
  2. 2.Choose justify-items and align-items values, then inspect the always-visible live preview.
  3. 3.Generate the validated .grid rule and copy the CSS, or select it manually if clipboard permission is blocked.

About CSS Grid Generator

CSS Grid Generator creates a small, explicit two-dimensional layout without asking you to remember each property or hand-type repetitive track values. Enter from one through twelve columns, one through twelve rows, and a gap from zero through 100 pixels. Choose how items align on the inline axis with justify-items and on the block axis with align-items. The preview remains visible while you work, and a successful generation produces a complete .grid rule that can be copied into a stylesheet. All generation and preview work happens locally in the browser.

The output begins with display: grid to establish a grid formatting context. It then emits grid-template-columns and grid-template-rows using repeat(n, minmax(0, 1fr)). The repeat() notation avoids duplicating the same track function many times. Each track receives one fraction of available space, while minmax(0, 1fr) gives the flexible track a zero minimum instead of allowing a long min-content contribution to force the track wider than the container. This is a practical equal-track pattern, but it does not automatically make a production layout responsive. Authors should still add media queries, container queries, auto-fit patterns, or alternative templates when the number of tracks should change across viewport sizes.

The gap declaration uses one pixel length, so the same spacing applies between both rows and columns. Zero is valid and removes the gutter. The generator deliberately limits the value to 100px because its purpose is a bounded visual builder, not an arbitrary CSS editor. It never silently changes 101 into 100. Out-of-range, signed, decimal, whitespace-padded, unit-suffixed, empty, or excessively long numeric text produces an explicit error and no generated CSS. The exact limits are accepted: one and twelve tracks, plus zero and 100 pixels of gap.

justify-items controls how every grid item is justified inside its grid area along the inline axis. align-items supplies the corresponding default alignment along the block axis. This tool offers four broadly useful closed values for each property: stretch, start, center, and end. Stretch fills the relevant axis when the item’s sizing permits it. Start and end move the item toward the corresponding edge, while center positions it between the edges. These controls align items inside their assigned areas; they are not justify-content or align-content, which align the grid tracks as a group inside a larger container. They also do not assign individual grid-row, grid-column, or grid-area placement.

Safety is deterministic rather than based on escaping arbitrary text. Column count, row count, and gap pass strict decimal-integer validation. Alignment choices must exactly match one of four internal enum values. CSS property names, punctuation, units, selector, repeat(), minmax(), and fr tokens are fixed by the implementation. A crafted value such as center followed by another declaration is rejected before string generation, even if a caller bypasses the visible select control. No arbitrary selector, property, custom value, URL, comment, brace, semicolon, or stylesheet fragment is interpolated from user input.

The preview is always present. When all live fields are valid, it shows the current track counts, gap, and alignment values immediately. When a field is invalid, the preview resets to the documented safe three-column by two-row default rather than displaying stale or partially interpreted input. The preview uses numbered sample items only to make cell boundaries and alignment visible. Its fixed height and constrained box are demonstrations, not declarations included in the copied CSS. Large gaps or twelve-by-twelve grids can make sample cells very small or require scrolling; the output still contains the exact requested values.

Generated code appears only after Generate CSS succeeds. Editing any control immediately removes the previous generated block, old error, and old copy status. Copying uses the browser Clipboard API. Each asynchronous copy attempt has a generation number, so an older permission result cannot display Copied after the CSS has changed or the component has closed. A blocked clipboard shows a manual-copy message and leaves the code selectable. Copy status clears automatically and its timer is canceled on edits or unmount. No generated snippet is sent to Lizely or stored by the tool.

The property syntax and behavior are anchored to the W3C CSS Grid Layout Module Level 2 specification, which defines grid containers, explicit row and column tracks, repeat(), flexible fr sizing, gutters, and grid-item alignment. MDN pages independently cross-check grid-template-columns, gap, justify-items, and align-items with practical syntax and browser documentation. Eight executable golden combinations cover minimums, maximums, asymmetric grids, every offered alignment value, and representative gaps. Tests also reject CSS-injection strings, unsupported enum values, decimals, signs, units, whitespace, and overlong input.

Use the result as a clear starting point rather than a complete page layout. The generator does not create named areas, implicit tracks, auto-placement controls, subgrid, masonry, responsive breakpoints, source-order changes, spans, or per-item alignment. Visual grid reordering should never replace logical document order, because keyboard navigation and assistive technology continue to depend on meaningful source structure. Add semantic HTML first, then adapt the generated declarations to the actual content and responsive requirements of the project.

Methodology & sources

Strictly parse three raw text fields without trimming or browser-side clamping: columns and rows must be decimal integers from 1 through 12, and gap must be a decimal integer from 0 through 100. Reject any field over 32 UTF-16 code units. Validate justify-items and align-items against the closed enum stretch, start, center, end. Generate fixed declarations using repeat(n, minmax(0, 1fr)), a px gap, and validated enum values. Derive both generated CSS and live preview style from the same validated config and shared track serializer, falling back to the documented safe default when raw input is invalid. Clear output, errors, copy state, and copy timers on every edit; guard asynchronous clipboard completion with job, timer identity, and alive refs.

Frequently asked questions

What CSS does the generator create?
It creates a .grid rule with display: grid, explicit repeated column and row tracks, one px gap, justify-items, and align-items.
Why use minmax(0, 1fr) for each track?
It creates equal flexible tracks while allowing their minimum to reach zero, which can reduce overflow caused by min-content sizing. Content may still need its own overflow handling.
Can I paste arbitrary CSS values or declarations?
No. Numeric fields accept only bounded whole decimals, and alignment fields accept only stretch, start, center, or end. All other CSS text is fixed by the generator.
Does this create a responsive production layout automatically?
No. It creates one explicit grid. Add media queries, container queries, or other templates when track counts should adapt to available space.

Related tools

Developer Tools guides

View all