Equal-width tracks from just three numbers
3 columns, 2 rows, and a 12px gap produce: display: grid;, grid-template-columns: repeat(3, 1fr);, grid-template-rows: repeat(2, 1fr);, and gap: 12px; -- a clean 3x2 grid where every column and every row shares the available space equally.
repeat(3, 1fr) is shorthand for writing 1fr 1fr 1fr manually -- the fr (fractional) unit divides the container's available space proportionally, so three equal 1fr columns each get exactly one-third of the container's width regardless of the container's actual pixel size.
A single gap: 12px; value applies that spacing uniformly between both columns and rows -- CSS Grid also supports setting column-gap and row-gap independently if you need different spacing in each direction, which this equal-gap generator doesn't expose as separate controls.
What this generator intentionally keeps simple
Equal 1fr tracks. Named lines and areas are not generated. Real-world grid layouts often need unequal track sizes (a fixed-width sidebar next to a flexible main column, for example) or named grid-template-areas for readable, semantic layout assignment -- both are common, powerful CSS Grid features this equal-tracks generator doesn't produce.
This generates the grid container's own CSS -- it doesn't generate placement rules for the grid's children (like grid-column: span 2 to make one item take up two columns), which is a separate, per-item concern layered on top of the container definition this tool produces.
For a genuinely responsive grid that changes column count at different screen widths, this static column-count output would need to be wrapped in media queries or replaced with a technique like repeat(auto-fit, minmax(...)) for content-driven responsiveness.
Related CSS layout tools
For a one-dimensional layout (a single row or column of items) rather than a two-dimensional grid, the CSS Flexbox Layout Generator is the more appropriate tool.
For fluid font sizing that scales with viewport width inside this grid layout, the CSS clamp() Font Calculator covers that separate responsive-typography need.
Frequently Asked Questions (FAQ)
What does repeat(3, 1fr) mean exactly?
It's shorthand for three equal fractional-unit columns (1fr 1fr 1fr). The fr unit divides available container space proportionally, so each of the 3 columns takes exactly one-third of the container's width, regardless of the container's actual size.
Can I set different gap sizes for rows versus columns?
This generator applies one shared gap value to both directions. CSS Grid itself supports column-gap and row-gap as independent properties if you need different spacing horizontally versus vertically -- you'd need to add that manually beyond this tool's single-gap output.
Does this generate unequal column widths, like a fixed sidebar plus flexible content?
No. Equal 1fr tracks. Named lines and areas are not generated. This produces equal fr-unit tracks only. Mixed sizing (like 250px 1fr for a fixed sidebar next to flexible content) needs to be written manually beyond what this equal-tracks generator outputs.
Does this generate rules for placing individual grid items?
No. It only generates the grid container's own properties (display, template columns/rows, gap). Placement rules for specific children, like grid-column: span 2, are a separate, per-item concern not covered here.
Is this grid responsive across different screen sizes?
Not automatically. The generated column count is fixed. For a layout that adapts to different viewport widths, wrap this output in media queries, or consider a technique like repeat(auto-fit, minmax(...)) for content-driven responsiveness instead of a fixed column count.
