CSS grid generator

Grid lays items out in rows and columns at once. Start with columns and gap, and add the rest if you need it.

What the output means

• display: grid turns the container into a grid.
• grid-template-columns: repeat(3, 1fr) makes three columns of equal width. The unit fr is a share of the free space, so 1fr 2fr would give the second column twice the width of the first.
• repeat(auto-fit, minmax(120px, 1fr)) makes as many columns as fit, each at least 120 pixels wide and sharing the rest. It is the usual way to build a card layout that needs no media queries: on a narrow phone it becomes one column, on a wide screen four or five.
• grid-auto-rows sets the height of the rows that the grid makes by itself as items arrive.
• gap is the space between rows and columns.
• justify-items places items inside their cell across the row.

auto-fit and auto-fill

Both repeat columns as long as they fit. The difference shows when there are few items: auto-fill keeps the empty columns, so the items stay at their minimum width, while auto-fit collapses the empty columns and stretches the items to fill the row. The tool uses auto-fit. Choose auto-fill by editing the word if you want items that never grow beyond a column.

Common mistakes

1. A minmax minimum larger than the screen. On a 320 pixel phone a column of at least 400 pixels causes sideways scrolling. Use min(100%, 300px) inside minmax if you need large minimums.
2. Writing 1fr columns with long unbreakable text, which can stretch the column. Add min-width: 0 to the item or use minmax(0, 1fr).
3. Using grid for a single row of buttons, where flexbox is simpler.

This is an independent site. It is not connected with the W3C, MDN, Google, Apple, Mozilla or Microsoft. Browser and product names belong to their owners.