Grid

Interactive grid builder. Customize columns, gaps, and generate CSS Grid code instantly.

Grid Builder

Columns: 3

112

Gap: 4 (16px)

016

Min Item Width (optional)

Enables responsive auto-fit grid (sm breakpoint and up)

Items: 6

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

HTML

<div class="grid grid-cols-3 gap-4">
  <div class="p-4 bg-blue-500 text-white rounded">Item 1</div>
  <div class="p-4 bg-blue-500 text-white rounded">Item 2</div>
  <div class="p-4 bg-blue-500 text-white rounded">Item 3</div>
  <div class="p-4 bg-blue-500 text-white rounded">Item 4</div>
  <div class="p-4 bg-blue-500 text-white rounded">Item 5</div>
  <div class="p-4 bg-blue-500 text-white rounded">Item 6</div>
</div>

Basic Grid

Create a basic grid with equal-width columns.

HTML

<div class="grid grid-cols-3 gap-4">
  <div class="p-4 bg-blue-500 text-white rounded">1</div>
  <div class="p-4 bg-blue-500 text-white rounded">2</div>
  <div class="p-4 bg-blue-500 text-white rounded">3</div>
</div>

Responsive Grid

Use responsive prefixes to change the number of columns at different breakpoints.

HTML

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <div class="p-4 bg-blue-500 text-white rounded">1</div>
  <div class="p-4 bg-blue-500 text-white rounded">2</div>
  <div class="p-4 bg-blue-500 text-white rounded">3</div>
  <div class="p-4 bg-blue-500 text-white rounded">4</div>
</div>

Auto-fit Grid

Create a responsive grid that automatically adjusts columns based on minimum item width.

HTML

<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
  <div class="p-4 bg-blue-500 text-white rounded">1</div>
  <div class="p-4 bg-blue-500 text-white rounded">2</div>
  <div class="p-4 bg-blue-500 text-white rounded">3</div>
</div>

Column Span

Make items span multiple columns.

HTML

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2 p-4 bg-blue-500 text-white rounded">Spans 2 columns</div>
  <div class="p-4 bg-blue-500 text-white rounded">1</div>
  <div class="col-span-3 p-4 bg-blue-500 text-white rounded">Spans 3 columns</div>
</div>

Row Span

Make items span multiple rows.

HTML

<div class="grid grid-cols-2 grid-rows-3 gap-4">
  <div class="row-span-2 p-4 bg-blue-500 text-white rounded">Spans 2 rows</div>
  <div class="p-4 bg-blue-500 text-white rounded">1</div>
  <div class="p-4 bg-blue-500 text-white rounded">2</div>
  <div class="p-4 bg-blue-500 text-white rounded">3</div>
</div>

Gap Sizes

HTML

<!-- Small gap -->
<div class="grid grid-cols-3 gap-2">...</div>

<!-- Medium gap (default) -->
<div class="grid grid-cols-3 gap-4">...</div>

<!-- Large gap -->
<div class="grid grid-cols-3 gap-8">...</div>

<!-- Gap X and Y separately -->
<div class="grid grid-cols-3 gap-x-4 gap-y-8">...</div>