CSS Grid Generator

Generate CSS Grid layouts visually with customizable rows, columns, and gaps

Grid Configuration

Rows: 3

Columns: 3

Row Gap: 10px

Column Gap: 10px

Row Template

Column Template

Presets:

Preview

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Generated CSS

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

Generated HTML

<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 Template Units:

1fr - Flexible fraction of available space
200px - Fixed pixel size
auto - Auto-size based on content
minmax(100px, 1fr) - Min and max constraints