CSS Grid Generator
Build a CSS grid with equal, auto-fit or custom tracks, see it laid out live, and copy the CSS or Tailwind.
Build a grid with named tracks and responsive auto-fit columns, and see it laid out as you change it.
Grid
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))
auto-fit with minmax is how you get a responsive grid without a single media query: the browser fits as many columns as will hold the minimum width, then shares the remainder between them. Resize this panel to watch the column count change on its own.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
}About the css grid generator
The most useful thing grid can do is not the twelve column layout. It is auto-fit with minmax, which fits as many columns as will hold a minimum width and shares the leftover space between them. That gives you a responsive grid with no media queries and no breakpoints to maintain.
Set a minimum column width, and the browser works out the column count for every screen size on its own. One line replaces the three or four breakpoints a card grid would otherwise need.
How to use it
- 1Choose equal, auto fit, or a custom track list.
- 2For auto fit, set the minimum column width.
- 3Set the gap.
- 4Resize the preview to watch the columns rearrange, then copy the CSS.
Questions
What does auto-fit with minmax actually do?
It fits as many columns as can hold the minimum width, then stretches them to share the remaining space. The column count changes with the container, so no media queries are needed.
What is the difference between auto-fit and auto-fill?
With fewer items than columns, auto-fit collapses the empty tracks so the items stretch to fill the row, while auto-fill keeps them and leaves a gap. auto-fit is usually what you want.
What is fr?
A fraction of the space left after fixed tracks are placed. 200px 1fr 1fr gives a fixed sidebar and two equal columns sharing everything else.
Grid or flexbox?
Grid when rows and columns need to align with each other. Flexbox when you are laying out along a single direction and are happy for items to size themselves.