All tools

CSS Grid Playground

Visual CSS Grid with copy-ready CSS.

1
2
3
4
5
6
7
8
9
CSS
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(60px, auto));
gap: 8px;

CSS Grid playground. Use auto-fit + minmax() for responsive grids that wrap on small screens. The 'fr' unit distributes leftover space proportionally - the most powerful CSS Grid feature.

About

Adjust columns, rows, gap, and column template (equal, auto-fit, custom). Live preview with numbered cells. Auto-fit creates responsive grids that wrap on smaller screens.

How to use

  1. Tweak columns and rows.
  2. Copy the CSS.

FAQ

auto-fit vs auto-fill?+

Both wrap items based on minmax. auto-fit collapses empty columns; auto-fill keeps them as empty space. For most responsive grids, auto-fit is what you want.