Build CSS grid templates visually with live preview. CSS Grid Generator is a free online tool from the ToolsRift CSS Generators collection. It runs entirely in your browser — nothing to install, no signup, and your data never leaves your device.
Set the number of columns and rows, adjust gaps and sizing, and copy the generated grid-template CSS.
A two-dimensional layout system that arranges items into rows and columns using grid-template properties.
Use Grid for two-dimensional layouts (rows and columns together); Flexbox is better for one-dimensional rows or columns.
The fr unit distributes leftover space; 1fr 2fr splits free space so the second column is twice as wide as the first.