English
Italy
Spain
Arabic
Grids
Use our powerful mobile-first grid to build layouts of all shapes and sizes thanks to a twelve column system.
Grid row
Grid system uses a grid rows, and columns to build layout.
<div class="grid grid-rows-4 sm:grid-rows-2 md:grid-rows-1">
<!-- Grid content in here -->
</div>
Grid column
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4">
<!-- Grid content in here -->
</div>
You can edit grid column with add child class col-span-2 or row-span-2
Responsive Grid
Content
Content
Content
<div class="grid grid-cols-1 md:grid-cols-3">
<div class="w-full">
Content
</div>
<div class="w-full">
Content
</div>
<div class="w-full">
Content
</div>
</div>
You can edit grid column with change grid-cols-1 md:grid-cols-3
12 Grid Column
Content 1
Content 2
Content 2
Content 3
Content 3
Content 3
Content 4
Content 4
Content 4
Content 4
Content 5
Content 5
Content 5
Content 5
Content 5
Content 6
Content 6
Content 6
Content 6
Content 6
Content 6
content 12
content 12
content 12
content 12
content 12
content 12
content 12
content 12
content 12
content 12
content 12
content 12
<!-- grid 1 -->
<div class="grid grid-cols-1">
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 1</div>
</div>
</div>
<!-- grid 2 -->
<div class="grid grid-cols-1 sm:grid-cols-2">
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 2</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 2</div>
</div>
</div>
<!-- grid 3 -->
<div class="grid grid-cols-1 md:grid-cols-3">
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 3</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 3</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 3</div>
</div>
</div>
<!-- grid 4 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 4</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 4</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 4</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 4</div>
</div>
</div>
<!-- grid 5 -->
<div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5">
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 5</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 5</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 5</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 5</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 5</div>
</div>
</div>
<!-- grid 6 -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 6</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 6</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 6</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 6</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 6</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">Content 6</div>
</div>
</div>
<!-- grid 12 -->
<div class="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-6 lg:grid-cols-12">
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="py-5 h-20 w-full">content 12</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="py-5 h-20 w-full">content 12</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="py-5 h-20 w-full">content 12</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="py-5 h-20 w-full">content 12</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="py-5 h-20 w-full">content 12</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="py-5 h-20 w-full">content 12</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="py-5 h-20 w-full">content 12</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="py-5 h-20 w-full">content 12</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="py-5 h-20 w-full">content 12</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="py-5 h-20 w-full">content 12</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="py-5 h-20 w-full">content 12</div>
</div>
<div class="px-4 w-full border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="py-5 h-20 w-full">content 12</div>
</div>
</div>
You can edit responsive grid column with change sm:, md:, lg:, xl:
Mix Responsive Grid
1/3
2/3
1/6
2/3
1/6
<!-- grid -->
<div class="grid grid-cols-1 md:grid-cols-3">
<div class="px-4 w-full md:col-span-1 border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">1/3</div>
</div>
<div class="px-4 w-full md:col-span-2 border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">2/3</div>
</div>
</div>
<!-- grid -->
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6">
<div class="px-4 w-full lg:col-span-1 border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">1/6</div>
</div>
<div class="px-4 w-full lg:col-span-4 border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">2/3</div>
</div>
<div class="px-4 w-full lg:col-span-1 border border-gray-200 dark:border-gray-700 bg-surface-200 dark:bg-surfacedark-200">
<div class="p-5 h-20 w-full">1/6</div>
</div>
</div>
You can see complete row and column of Tailwind css in here Tailwindcss Column