CSS Grid Playground | Interactive Learning Tool

⚙️ Grid Controls

💡 Quick Tip

Try different presets to see how CSS Grid properties work together. Hover over grid items to see them scale!

📏 Grid Structure

Columns

Rows

Gap (px)

🎯 Alignment

Justify Items

Align Items

Justify Content

Align Content

🎨 Grid Items

Number of Items

🎨 Live Preview

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 15px;
  justify-items: stretch;
  align-items: stretch;
}