CSS

CSS Grid Generator

Choose a column strategy, resize the preview, and copy the grid CSS.

Result

1
2
3
4
5
6

Auto-fit adds or removes columns as the container changes, then expands occupied tracks.

CSS 

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 16px;
}

.grid > * {
  min-width: 0;
}

Choose the right grid strategy

Select a column strategy, adjust its sizing and gap, and test several preview widths. Copy the generated .grid rule for the parent of your grid items.

An equal-column grid uses repeat(3, minmax(0, 1fr)) for three flexible tracks. The zero minimum lets columns shrink below their content’s intrinsic width. Wrap long content in your own design to prevent it from spilling outside a track.

A fixed-count minimum-width grid uses repeat(3, minmax(180px, 1fr)). Three columns always remain; a narrow container can overflow because three minimum widths and two gaps must still fit. This is useful when you plan to change the column count at a breakpoint.

Responsive cards with auto-fit

repeat(auto-fit, minmax(min(180px, 100%), 1fr)) creates as many columns as fit and collapses empty tracks. The nested min() lets a single column fit inside a container narrower than 180px. Remaining columns share available width.

Example sizing

With a 640px container, 180px minimum, and 16px gap, three columns fit: their minimum total is 572px. At 400px, two columns fit. Change the preview width to inspect that behavior; the item count and simulated width are preview controls and are not exported.

Using the output

  • Apply class="grid" to a container with one direct child per item. The output handles layout, while your own CSS supplies colors, padding, and content.
  • Auto-fit depends on container width, not a fixed viewport breakpoint. Embedded grids can therefore respond to their available space.
  • This tool creates columns with automatically sized rows. Explicit row tracks, named areas, spanning, and subgrid are outside its scope.

Related Tools