Layout Tool

Grid Generator

Create complex CSS Grid layouts visually with Tailwind CSS

Grid Settings
Grid Items
Item 11x1
Item 21x1
Item 31x1
Responsive Preview

Preview at Base (<640px)

Item 1
Item 2
Item 3

Drag to highlight cells:

Tailwind Classes

Container:

grid grid-cols-3 grid-rows-3 gap-4
CSS Grid Output
1.grid-container {
2  display: grid;
3  grid-template-columns: repeat(3, minmax(0, 1fr));
4  grid-template-rows: repeat(3, minmax(0, 1fr));
5  gap: 1rem;
6}
HTML with Tailwind
1<div class="grid grid-cols-3 grid-rows-3 gap-4">
2  <div>Item 1</div>
3  <div>Item 2</div>
4  <div>Item 3</div>
5</div>
Quick Reference

Grid Columns

  • grid-cols-1 to grid-cols-12
  • col-span-* - Span columns
  • col-start-* - Start position

Grid Rows

  • grid-rows-1 to grid-rows-6
  • row-span-* - Span rows
  • row-start-* - Start position

Gap

  • gap-* - Uniform gap
  • gap-x-* - Column gap
  • gap-y-* - Row gap

Auto Flow

  • grid-flow-row - Row flow
  • grid-flow-col - Column flow
  • grid-flow-dense - Dense packing

You might also like

Flexbox Playground

Learn and build flexbox layouts

Container Query Preview

Test container queries