Build grid-template-columns and rows visually, position items and copy ready CSS or Tailwind.
`grid-template-columns` and `grid-template-rows` define the size of each container track. The `fr` unit distributes the remaining space proportionally after fixed sizes (px, %) have already been reserved, which is why `1fr 1fr 1fr` creates three equal columns that adapt to the available width. The `minmax(min, max)` function locks a floor and a ceiling for a track, widely used with `repeat(auto-fit, minmax(220px, 1fr))` to build responsive grids without a single media query, the browser works out on its own how many columns fit. Each item is positioned with `grid-column` and `grid-row`, which accept the `start-line / end-line` notation, grid lines are numbered starting at 1, not the tracks between them. `auto-fit` collapses empty tracks, `auto-fill` keeps the reserved space even without content, the difference only shows up when there are fewer items than columns that would fit.
Paste the code into your HTML and the tool shows up on your page, without J-Kit's navigation and ads. It still runs in the browser of whoever visits your site.
<iframe
src="https://jkit.tools/embed/en-US/css-grid-generator"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="CSS Grid Generator"
></iframe>These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.
Percentage is computed against the container's full width. `fr` distributes whatever space is left after fixed-size tracks (px, minmax minimum) are already reserved, which is why `1fr 200px` lets the first column take everything not used by the 200px track, something percentage alone can't express.
Click an item to select it, drag to move it, or use the corner handle to resize it.
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}CSS is generated locally in your browser.