Layout Presets

Grid Template

Examples: 1fr 2fr, repeat(3, 1fr), minmax(100px, auto), auto-fill

Auto Placement

Gap

Alignment

Container Size

Display Options

Preview

1
2
3
4
5
6

Generated CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  grid-auto-columns: 1fr;
  grid-auto-rows: minmax(100px, auto);
  gap: 10px;
  padding: 20px;
  min-height: 400px;
}

CSS Grid Quick Reference

Template Values
  • 1fr - Fraction of available space
  • repeat(3, 1fr) - Repeat pattern
  • minmax(100px, 1fr) - Min/max size
  • auto-fill / auto-fit - Responsive columns
  • fit-content(200px) - Content-based max
Item Placement
  • span 2 - Span multiple tracks
  • 1 / 3 - From line 1 to 3
  • 1 / -1 - From first to last line
  • auto - Auto-place
Common Patterns
  • Responsive grid: repeat(auto-fill, minmax(250px, 1fr))
  • Sidebar: 250px 1fr
  • Holy grail: 200px 1fr 200px
  • 12-column: repeat(12, 1fr)