Grid Properties
Adjust CSS Grid properties and see live preview
Live Preview & CSS
See your grid layout in action
1
2
3
4
5
6
7
8
9
.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;
}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.