Why use CSS Grid Generator
CSS Grid lays out content in two dimensions at once, which makes it the right tool for page structures and card collections where both rows and columns matter. This generator builds the grid container rule from the controls you set and previews the result immediately, including the two responsive modes that most people reach for grid to get: auto-fit and auto-fill with minmax(), which reflow the number of columns as the container resizes without a single media query. The generated HTML is included alongside the CSS so you can paste a working example rather than reconstructing the markup.
Why fr is not the same as a percentage
The fr unit represents a share of the free space that remains after fixed-size tracks and all the gaps have been subtracted, and that subtraction is precisely what makes it different from a percentage. Three columns at 33.33% each plus a 16px gap between them overflows the container, because the percentages already account for all the width and the gaps are added on top — the classic reason a layout that looks right in isolation breaks the moment spacing is introduced. Three columns at 1fr each cannot overflow, because the browser removes the gaps from the available space first and divides only what is genuinely left. The fr unit also has a subtlety worth knowing: by default a track sized 1fr will not shrink below the intrinsic minimum size of its content, so a long unbroken word or a wide image can still push a column past its share. Writing minmax(0, 1fr) instead of 1fr overrides that floor and is the standard fix when grid items refuse to shrink.
auto-fit versus auto-fill, and when the difference shows
Both keywords ask the browser to create as many tracks as will fit, and in a container with enough items to fill every track they behave identically — which is why the distinction confuses people until they hit the case where it matters. The difference appears when there are fewer items than the tracks that would fit. auto-fill keeps the empty tracks it created, so three cards in a container wide enough for five stay at their minimum width and leave a gap on the right. auto-fit collapses the empty tracks to zero width, so the three cards stretch to share the whole row. Neither is correct in general: auto-fit suits cards that should expand to use the space, while auto-fill is right when you want a consistent item size regardless of how many items happen to be present, such as a calendar or a grid that items are added to over time. Pairing either with minmax(200px, 1fr) gives the standard responsive pattern where 200px is the smallest a column may become before the browser drops to fewer columns.
How to get your result
- 1
Set the number of columns and rows you want in the preview.
- 2
Choose a column sizing mode — equal fractions for a fixed count, or auto-fit / auto-fill for a responsive grid.
- 3
Adjust the row and column gaps, and set the minimum column width if you picked a responsive mode.
- 4
Copy the CSS and the matching HTML into your project.
Where this helps
Responsive card grids
auto-fit with minmax() fits as many cards per row as the space allows and reflows on resize, with no breakpoints to maintain.
Page layout with a sidebar
Grid handles a header, sidebar, content area and footer as one two-dimensional structure rather than a stack of nested flex containers.
Image galleries
Equal fractional columns keep every thumbnail the same width regardless of the image's natural dimensions.
Form layouts
A grid keeps labels and inputs aligned across rows in a way that floats and inline-block never managed reliably.
Worth knowing
- Use minmax(0, 1fr) rather than 1fr when a grid item contains long text or wide media that refuses to shrink.
- Grid handles two-dimensional layout; reach for Flexbox when content flows along a single axis and should wrap naturally.
- gap works in Flexbox too, so you rarely need negative margins for spacing in either layout system any more.