Build grid layouts visually, including responsive auto-fit columns.
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, minmax(60px, auto)); gap: 16px 16px;
Equal tracks gives you a simple repeat of identical columns. Custom tracks lets you write the template yourself, mixing fr units, fixed pixels and auto.
Turn on auto-fit and set a minimum column width. The grid then fits as many columns as will hold that width and wraps the rest, with no media queries at all.
Column and row gaps are separate, since they often want different values. The preview is a real grid container, so the CSS produces exactly what you see.
One fraction of the free space left after fixed tracks and gaps are accounted for. Three columns of 1fr split the remaining width equally, and 1fr 2fr 1fr gives the middle one twice the share.
Both fit as many tracks as will hold the minimum. When there are fewer items than tracks, auto-fit collapses the empty ones so the items stretch, while auto-fill leaves them in place.
Use repeat with auto-fit and minmax, which is what the responsive toggle here produces. The browser fits as many columns as will hold the minimum width and wraps automatically.
Grid when rows and columns both matter, such as a page layout, a dashboard or a gallery. Flexbox for a single direction, like a toolbar or a row of chips.
It sets a floor and a ceiling for a track. minmax(180px, 1fr) means never narrower than 180 pixels, but grow to share the free space when there is room.
Yes, with grid-column and grid-row on the item, but that is per-item placement rather than a container property. This tool builds the container; add the placement rules yourself.
Yes. grid-gap was the old name and gap replaced it. Every current browser supports gap, so there is no reason to use the prefixed version.
Yes, completely free with no sign-up.
Every flexbox property with a live preview, plus CSS and Tailwind output.
Open ToolRound corners visually, including the slash syntax that produces organic blob shapes.
Open ToolMinify or beautify CSS with strings and data URIs left intact, and see how much smaller it got.
Open Tool