CSS Grid Generator
Generate CSS Grid layouts visually and copy styles
100% Client-Side
Private & Secure
3 columns
3 rows
16px
16px
#1
#2
#3
#4
#5
#6
#7
#8
#9
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
column-gap: 16px;
row-gap: 16px;
}
.grid-item {
background-color: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 16px;
text-align: center;
}<div class="grid-container"> <div class="grid-item">Cell 1</div> <div class="grid-item">Cell 2</div> <div class="grid-item">Cell 3</div> <div class="grid-item">Cell 4</div> <div class="grid-item">Cell 5</div> <div class="grid-item">Cell 6</div> <div class="grid-item">Cell 7</div> <div class="grid-item">Cell 8</div> <div class="grid-item">Cell 9</div> </div>