Grid
Interactive grid builder. Customize columns, gaps, and generate CSS Grid code instantly.
Grid Builder
112
016
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>