🎨 CSS Grid Generator

Name: aesthetesoft
Address: Budapest, HU
Telephone: +90-555-123-4567
Price range: $$
Rating: 5.0

Create responsive CSS Grid layouts visually and get the code instantly

Grid Configuration

Columns

Rows

Column Gap (px)

Row Gap (px)

Quick Presets

Grid Items

Col Start

Col End

Row Start

Row End

Col Start

Col End

Row Start

Row End

Col Start

Col End

Row Start

Row End

Col Start

Col End

Row Start

Row End

Live Preview

Header

Navigation

Main Content

Sidebar

Generated CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 10px;
  row-gap: 10px;
  min-height: 100vh;
  padding: 20px;
}

.grid-item-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-item-2 {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
  background: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-item-3 {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  background: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-item-4 {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
  background: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML Structure

<div class="grid-container">
  <div class="grid-item-1">Header</div>
  <div class="grid-item-2">Navigation</div>
  <div class="grid-item-3">Main Content</div>
  <div class="grid-item-4">Sidebar</div>
</div>

💡 Pro Tips

• Use fractional units (fr) for responsive columns
• Grid lines start from 1, not 0
• Negative values reference from the end of the grid
• Use span keyword for relative sizing (e.g., span 2)
• Consider using grid-template-areas for complex layouts