Initial 3x3 State and 1-12 Row/Column Settings
The CSS Grid Layout Builder is a tool that allows you to specify the number of rows and columns along with common track sizes on the screen, assembling sample CSS and HTML.
The initial state is 3 columns by 3 rows, with columns at 1fr, rows at 100px, and both row and column gaps at 16px. The preview displays elements numbered from 1 to 9, and the CSS and HTML fields show code for these initial conditions.
The number of columns and rows can each be adjusted from 1 to 12 using increment and decrement buttons or direct numeric entry. Input values are automatically sanitized: decimal inputs are rounded to the nearest integer, values outside the supported range are clamped between 1 and 12, and entering a non-finite or invalid number in the interface retains the current valid count.
This maintains valid integer counts in the generated CSS repeat() functions and limits the grid structure to a maximum of 144 cells (12×12).
The maximum limit of 12 is an interface constraint designed for practical layout prototyping rather than a limitation of the CSS Grid specification.
The number of child elements generated in the HTML is "columns × rows". It outputs consecutive numbers starting from 1 in <div class="grid-item"> tags, resulting in 8 items for a 4×2 grid, and a maximum of 144 items for a 12×12 grid.
This is not an interface for freely adding or removing arbitrary numbers of child elements; instead, it provides the exact number of explicit cells you configured as a foundation for verifying the layout.
The numbers in the preview and HTML are temporary data intended to help you visually distinguish the layout. When integrating this into a real site, you should replace them with actual content like cards, images, or headings.
There is no history to save inputs, no named layouts, no shared URLs, and no file importing. Reloading the page resets it to the initial 3×3 grid, so be sure to manually copy the necessary CSS and HTML during your workflow.
repeat() and Units for Column Widths and Row Heights
The track definitions for the parent element are output as grid-template-columns: repeat(columns, column-width) for columns and grid-template-rows: repeat(rows, row-height) for rows.
The repeat() notation repeats the same track definition a specified number of times. This tool applies the same column width to all columns and the same row height to all rows, and it does not have a feature to list different values for individual columns or rows.
There are four options for column width: fr, px, %, and auto. The default repeat(3, 1fr) creates three column tracks of 1fr.
The fr unit does not mechanically divide the parent width into three equal parts; rather, it distributes the remaining space based on the flex factor after processing fixed-length tracks, gaps, and content-derived minimum sizes.
If you insert a long un-wrappable string or a wide image, the element might not shrink as expected even with the same fr value.
The px unit represents a CSS pixel length and specifies the column width as a fixed value. A % column width is based on the inline size inside the grid container, but if the container's width itself depends on the tracks, it is treated as auto during intrinsic sizing and resolved afterward.
Adding row or column gaps to repeat(3, 33%) can cause the total to exceed 100%, so selecting % alone does not guarantee that the items will fit within the container.
The auto option outputs repeat(columns, auto) without displaying a numeric input field. An auto track is affected by the dimensions of its content, and if there is leftover space, it might be stretched depending on alignment conditions.
It does not simply mean "fixed to the exact same width as the content."
There are three supported unit options for row heights: px, fr, and auto, with a default setting of 100px. Track sizes are enforced to positive numbers with a minimum value of 1.
Selecting fr assigns flexible fractional space distribution, px specifies fixed dimensions, and auto sizes tracks based on cell content.
The live preview applies the exact same unit strings and track declarations as the generated CSS code without forcing row tracks to pixels.
How fr and percentage tracks render in practice depends on whether the container or its children possess definite block-axis sizing.
Because the generator does not inject arbitrary height or min-height rules onto the container, you should ensure your destination element has appropriate sizing constraints to achieve the desired row distribution.
Row/Column Gaps and the Two-Value Gap Syntax
Spacing between cells is configured using dedicated numeric inputs for row gap and column gap. Both values are normalized to prevent negative numbers, resetting any negative entry to 0 while retaining the current valid numeric value if an invalid or non-finite input is entered.
A shared unit selector lets you choose between px, rem, and %, applying the chosen unit consistently to both axes in the generated CSS gap: <rowGap><unit> <colGap><unit>; declaration and the live preview style.
The interface uses a single shared unit for both gaps rather than allowing mixed combinations such as percentage column gaps alongside rem row gaps.
The shorthand CSS gap property is output in the order of gap: row-gap column-gap;, which differs from the visual order of the input fields on the screen.
For example, 24px column gap and 8px row gap will generate gap: 8px 24px;. Even if both values are identical, it does not shorten them to a single value, retaining the two-value notation so you can explicitly confirm the current row and column gaps.
The px unit is a CSS pixel, and rem is a length relative to the computed font-size of the root element. Even with the same 1rem, the actual physical size changes depending on the font size set on the html element of the destination site.
If the preview in the tool and the root settings of your production site differ, the visual spacing will not look identical.
A % gap is relative to the content box dimensions of the corresponding axis in the destination site. If a percentage gap and the grid container dimensions create a cyclical dependency, it is treated as 0 when calculating intrinsic sizes, and then resolved against the content box during layout.
Note that the preview fixes the gap unit to px and does not fully reflect % gaps. A % specification should not be equated with guaranteed responsive behavior; always verify it in your actual layout.
Breakdown of the Generated CSS and Numbered HTML
The CSS output consists of two rules: .grid-container and .grid-item. The .grid-container includes display: grid, the repeat() functions for columns and rows, and the gap.
In the initial state, this amounts to three 1fr columns, three 100px rows, and a 16px 16px gap. Class names are fixed, and there is no feature to rename them for CSS Modules or to avoid conflicts if an identical class exists in an existing project.
The .grid-item contains decorative styles to visually distinguish the layout cells. The contents include a light blue background-color, a blue dashed border, 20px padding, text-align: center, and an 8px border-radius.
These declarations are not strictly required for calculating Grid tracks. You can delete or change the colors, margins, and borders to match the design of your production site.
The HTML output wraps <div class="grid-item"> tags (equal to rows × columns) in document order inside a parent <div class="grid-container">.
Individual items do not have grid-column, grid-row, span, or named areas attached to them. It relies on the browser's standard auto-placement structure, where items are sequentially placed into empty cells along the row axis.
You can toggle between the CSS code and HTML structure tabs in the interface and copy each block individually. When you trigger the copy action, the operation awaits confirmation from the Clipboard API, presenting a checkmark icon and success state for approximately 2 seconds upon success.
If writing to the clipboard fails due to browser permissions or sandbox restrictions, a guidance message advises you to select the code field and copy it manually.
Modifying any grid settings immediately clears active copy indicators and resets the button. Successfully copying the code does not guarantee that your project stylesheet lacks class name conflicts, layout collisions, or cascade specificity overrides.
This tool does not download CSS or HTML files, nor does it generate React components, Tailwind classes, SCSS, or CSS-in-JS formats.
It is up to the user to take the two displayed code snippets and integrate them into their project's specific architecture.
Preview Reflections and Differences from Real Pages
The live preview renders using inline CSS properties that match the generated code declarations exactly, applying the same track counts, dimension values, gap metrics, and selected unit strings (px, fr, %, or auto) without forcing rows or gap units to pixels.
Because fractional fr and percentage dimensions depend on having definite parent container dimensions and child content, the visual layout inside the preview container naturally reflects CSS Grid specification behaviors rather than artificial conversions.
To mirror this appearance in your production application, provide appropriate width and height constraints on your target container.
Additionally, the preview is not a perfect replica of a finished site using the generated code. The verification frame has its own page-display width, a maximum height of 350px, inner padding, and scroll configurations.
The individual elements in the preview also possess unique margins, colors, and borders to make numbers legible, which are not perfectly identical to the sample .grid-item CSS provided.
Here, you are merely confirming the matrix count and basic track behavior; final styling must be verified at the destination.
On an actual page, the parent element's width and height, box-sizing, root font-size, the children's minimum content dimensions, image sizes, and text wrapping all affect the computed results.
Notably, fr and auto tracks are heavily influenced by their content, % tracks resolve differently when base dimensions are undetermined, and rem scales with the site's root settings.
These conditions cannot be recreated solely by numbered preview elements.
If you include many fixed px columns, if the sum of % tracks and gaps is too wide, or if long content pushes the minimum width outward, the entire grid may overflow its parent.
While the preview frame can scroll, it does not automatically add overflow to the generated CSS. It is the user's responsibility to decide whether to allow horizontal scrolling on public pages, change the column count/size, or add separate responsive rules.
Unsupported Features and Pre-Launch Checks
This tool generates a basic explicit grid using shared values for all columns and all rows. You cannot configure different widths per column, different heights per row, minmax(), fit-content(), auto-fit, auto-fill, subgrid, or masonry from this screen.
Even if these terms are mentioned for context, they are not handled as auto-generated features of this tool.
Individual item placement is also out of scope. We do not output grid-template-areas, named lines, grid-column, grid-row, span, overlapping items, reordering, or drag-to-resize features.
There are no media queries, container queries, or breakpoints, meaning any responsive logic—like reducing a 12-column layout to 4 or 1 depending on screen width—must be manually added to the generated CSS afterward.
If you add more child elements than the explicit cell count after generation, the CSS Grid auto-placement algorithm may create implicit tracks.
Because this tool does not output grid-auto-rows or grid-auto-columns, it does not design the row and column sizes for these appended elements.
Conversely, if you reduce the number of children, empty explicit cells will remain. After altering the HTML, be sure to verify the layout with the actual item count.
The output div is a generic element without semantic meaning. While div might be appropriate for a purely decorative group, you should consider using tags that match the information's purpose—such as ul and li for lists, article for standalone posts, or nav for navigation links.
CSS Grid changes appearance but not screen reader or keyboard focus order, so you must logically maintain DOM sequencing, heading structures, link names, and focus flows separately.
Before launching, confirm your display across target browsers and screen widths, verify minimum widths and heights when actual data is inserted, and check for overflow caused by percentage or fixed widths, class name collisions, and text-background contrast.
The generated code is merely a starting point for layouts; it does not automatically evaluate or guarantee equal spacing for all content, responsive readiness, accessibility compliance, cross-browser parity, or commercial use conditions.