TTULAKITO
Designer

CSS Grid Generator

Visually design CSS grid layouts and copy the generated code.

All tools

Controls

1
2
3
4
5
6

CSS

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 12px;

Frequently asked questions

When should I use CSS Grid instead of Flexbox?
Grid is for two-dimensional layouts where you control both rows and columns, like dashboards or magazine pages. Flexbox is one-dimensional and better suited for nav bars, toolbars, and aligning items along a single axis.
What does the fr unit do in grid-template-columns?
fr stands for fractional unit and divides the remaining space after fixed-size tracks are placed. grid-template-columns: 200px 1fr 2fr gives a fixed 200px column and splits the rest in a 1:2 ratio.
How do I make a responsive grid without media queries?
Use grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)). The browser fits as many 240px-or-wider columns as it can, then stretches them to fill the row.