Start with the number of content tracks your layout needs.
Local CSS Grid generator
Build a CSS Grid layout by eye
Choose rows, columns, and gap values, see the layout immediately, and copy clean CSS for your next interface.
* Everything runs in your browser. No layout data is uploaded.
CSS ready
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 16px;123456
QUICK GUIDE
A grid you can understand before you ship it
Use equal flexible tracks for cards that should share the available width.
Adjust gap to establish rhythm without hand editing several declarations.
Paste the generated rules into the grid container and tune the content separately.
FAQ
CSS Grid questions
What does minmax(0, 1fr) do?
It gives each track an equal share while allowing content to shrink instead of forcing overflow.
Can I create named areas here?
GridBox covers the common track-and-gap setup. Add grid-template-areas when your layout needs named regions.
Does the preview use the same CSS?
Yes. The preview applies the selected rows, columns, and gap values directly in this browser.