CSS Grid Generator

Visual CSS Grid layout builder. Adjust columns, rows, gap, and sizes. Copy the generated code.

Grid Settings

Columns: 3

Rows: 3

Gap: 16px

Items: 9

Column Sizes

Col 1

Col 2

Col 3

Row Sizes

Row 1

Row 2

Row 3

Preview

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 16px;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>