CSS Grid Generator

Generate CSS Grid layout code with visual configuration

Columns

Rows

Gap (px)

Column Sizing

Min Column Width (for responsive)

Result

CSS Code

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 16px;
}

Tailwind Classes

grid grid-cols-3 gap-4 grid-rows-2

HTML Template

<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>

Items

6 grid items

Related Tools

CSS Flexbox Playground

Generate Flexbox layouts

Tailwind Class Sorter

Sort Tailwind classes