⊞

CSS Grid Generator

Create responsive CSS Grid layouts with visual editor. Customize rows, columns, gaps, alignment, and generate production-ready CSS.

Grid Settings

Enable auto-fit to create responsive grid columns that adjust to container width
Set number of grid columns from 1 to 12
1612
Set number of grid rows from 1 to 12
1612
Define column sizing using CSS grid values like 1fr, 200px, auto, minmax()
Define row sizing using CSS grid values like 1fr, 100px, auto, minmax()
Set spacing between grid items using CSS units. Use single value for uniform gap or two values for row/column gaps
Control horizontal alignment of grid items within their cells
Control vertical alignment of grid items within their cells
Control horizontal distribution of grid tracks within container
Control vertical distribution of grid tracks within container
Grid updated: 3 columns by 3 rows with 16px gap

Visual Preview

1
2
3
4
5
6
7
8
9
3 × 3 Grid Layout

Generated CSS

Complete CSS Code:
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.grid-item {
  background: #e5e7eb;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  min-height: 60px;
}

HTML Example

Use this HTML structure with your generated CSS
<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
  <div class="grid-item">Item 7</div>
  <div class="grid-item">Item 8</div>
  <div class="grid-item">Item 9</div>
</div>

Grid Properties

display
grid
grid-template-columns
repeat(3, 1fr)
grid-template-rows
repeat(3, 1fr)
gap
16px

Grid Information

Columns
3
Rows
3
Gap
16px
Total Items
9