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.
Your data is processed entirely in your browser. Nothing is sent to any server.
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]