CSS Grid generator
Choose the columns, rows and the space between them, or use responsive mode so cards rearrange themselves to fit the screen. The preview shows the result instantly.
Layout with CSS Grid
Drag the corner of the preview to test widths. Tap an item to make it span 2 columns.
Available in: 
CSS Grid generator: what it is for
Choose fixed columns (with shortcuts for 2, 3 and 4 columns, content with sidebar and menu with content) or responsive mode, where the columns adapt to the width with repeat(auto-fit, minmax()). Set the number of items and the gap between them.
Tap an item in the preview to make it span two columns and drag the corner of the preview to test widths. The CSS and HTML are ready to copy.
How to use
- Choose the mode and columns.
- Set items and gap; tap items to span 2 columns.
- Copy the CSS and HTML.
When to use it
- Grids of cards, products and photos.
- Layouts with a sidebar.
- Learning CSS Grid by seeing the result.
Frequently asked questions
What does 1fr mean?
A fraction of the leftover space. Three columns of 1fr 1fr 1fr split the width into equal parts; 2fr 1fr makes the first column twice as wide as the second.
What does repeat(auto-fit, minmax(220px, 1fr)) do?
It creates as many columns as fit, each at least 220px wide, and stretches them to fill the row. It is the simplest way to make a responsive card grid without media queries.
How do I make an item span two columns?
Use grid-column: span 2 on the item. In the preview, tap an item to toggle between 1 and 2 columns and the CSS updates.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.