Define grid columns, rows, and named areas visually. Get CSS grid-template-columns/rows and Tailwind grid classes instantly with live preview.
More free utilities you might find useful
Quick answers to common questions
The fr (fractional) unit represents a fraction of the available space. grid-template-columns: 1fr 2fr 1fr creates 3 columns where the middle takes twice the space of each side. repeat(3, 1fr) creates 3 equal-width columns.
Use auto-fill with minmax(): grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); Creates as many columns as fit, each at least 250px wide. Automatically reflows from 1 to N columns.
grid-template-areas names regions visually. grid-column/grid-row uses line numbers for precise placement. Named areas are best for large layouts.
Processing runs in your browser. Your inputs are not sent to our servers.
CSS Output
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 120px); column-gap: 16px; row-gap: 16px;
Tailwind
grid grid-cols-[repeat(3,1fr)] grid-rows-[repeat(3,120px)] gap-x-[16px] gap-y-[16px]