CSS Grid Generator

Create beautiful grid layouts. Visual editor, copy CSS code instantly.

⌘+C Copy CSS⌘+T Copy Tailwind
1
2
3
4
5
6
7
8
9
CSS Code
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}

.grid-item {
  min-height: 100px;
  padding: 1rem;
}

Frequently Asked Questions

Common questions about CSS Grid

01

What is CSS Grid?

02

What's the difference between Grid and Flexbox?

03

How do I create a grid with different column sizes?

04

What does 'fr' unit mean?

05

Can I nest grids?

06

Is CSS Grid responsive?