Grid Properties
Adjust CSS Grid properties and see live preview
Live Preview & CSS
See your grid layout in action

Live Preview

1
2
3
4
5
6
7
8
9

Generated CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}
Grid Tips:

• fr units create flexible tracks that share available space

• justify-* controls horizontal alignment, align-* controls vertical

• *-items affects individual grid items, *-content affects the entire grid

• auto-fit/auto-fill with minmax() creates responsive grids