Browser-local layout builder

CSS Grid Generator

Build explicit rows and columns, place items by grid line, inspect a real browser preview, and export readable CSS and HTML without sending your layout anywhere.

Private by design: layout values and labels stay in this page. The tool makes no API requests, stores nothing, and cannot inspect or change your project.

1. Define explicit tracks

Use 1–12 entries per axis and at most 64 UTF-16 code units per entry. One entry represents one explicit track. Use a non-negative length or percentage, fr, auto, min-content, max-content, fit-content(), or minmax(). This tool creates safe repeat() runs for identical adjacent tracks.

Columns

    Rows

      2. Set gaps and alignment

      Gap drafts are limited to 12 UTF-16 code units before numeric validation.

      3. Place items

      Add up to 24 items with labels of at most 40 Unicode characters. Start and span drafts are limited to 12 UTF-16 code units, use positive whole numbers, and must stay inside this tool’s explicit grid.

      Grid preview

      The preview uses this browser’s CSS Grid implementation. Fixed or percentage tracks can overflow; scroll the preview to inspect them.

      Generated code

      How to use the generated grid

      1. Choose a preset or add, remove, and reorder explicit column and row tracks.
      2. Set gaps and alignment, then give each item a label, starting line, and span.
      3. Select Generate and preview. Correct any marked field before copying the result.
      4. Paste the CSS into your stylesheet and the HTML into the appropriate template. Rename the example classes to match your project.

      Any edit after generation clears the preview and exported code. This prevents a successful-looking preview from silently describing older settings.

      Understanding tracks, lines, and fractions

      Explicit tracks and grid lines

      Three column tracks create four column lines. An item starting at line 2 with a span of 2 occupies the second and third tracks. This generator keeps placements inside the explicit grid; native CSS can also create implicit tracks, but that behavior is easier to trigger accidentally.

      fr, minmax(), and repeat()

      An fr value receives a fraction of leftover grid space after non-flexible sizing. minmax(12rem, 1fr) supplies a floor and a flexible ceiling. When compact output is enabled, adjacent identical tracks become forms such as repeat(3, minmax(0, 1fr)); the preview and placement counts still use three tracks.

      The flexible-cards preset uses explicit flexible tracks, not auto-fit. That keeps item-line validation deterministic. For a content-driven production layout, you may later replace the explicit list with repeat(auto-fit, minmax(...)) and retest placement rules.

      Validation scope and browser limits

      This tool validates a useful, bounded subset of CSS Grid track sizing: non-negative values in px, rem, em, ch, ex, vw, vh, vmin, vmax, or percent; fr; sizing keywords; fit-content(); and one-level minmax(). It deliberately rejects arbitrary var(), calc(), nested functions, line names, subgrid, masonry, and authored repeat() expressions rather than claiming to validate the complete CSS grammar.

      The preview shows computed behavior in the current browser and available space. It cannot prove support in another browser, account for your production fonts and content, detect surrounding layout constraints, or guarantee responsive behavior. Test the exported code at real breakpoints with representative content.

      Standards and privacy

      The output follows the W3C CSS Grid Layout and CSS Box Alignment models for explicit tracks, flexible lengths, placement, gaps, and alignment. Track compaction does not change the explicit track count. All generation is deterministic and local; no values are uploaded or saved. Clipboard and download actions are requested only when you activate their buttons and remain subject to browser permissions.