CSS Grid Generator: Visual Layout Builder

How to use the CSS grid generator

1. Set the number of columns and rows (up to 12 each) and the gaps between them.
2. Click a cell to place an item, or drag across several cells to make one item span multiple columns and rows.
3. Remove an item with its × button, or press Example layout for a header, sidebar, content and footer layout.
4. Copy the CSS, the matching HTML, or the same layout as Tailwind classes.

CSS Grid basics

• display: grid turns an element into a grid container; its direct children become grid items.
• grid-template-columns: repeat(4, 1fr) creates four equal columns. fr shares the free space; you can mix it with fixed sizes such as 240px 1fr.
• gap sets the space between rows and columns without margins on the items.
• grid-column: 1 / 3 places an item from line 1 to line 3, so it spans two columns. grid-row works the same way for rows.

Grid or flexbox?

Use grid when you control rows and columns at the same time: page layouts, dashboards, galleries and card grids. Use flexbox for one-dimensional rows or columns, such as a navbar, a button group or centering one element.

Responsive grids

For a card grid that adapts to any screen without media queries, use grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)). For page layouts, start with one column on phones and set the full template inside a min-width media query. In Tailwind, prefix the classes, for example md:grid-cols-4. See finished examples in our page templates.