Grids
1
2
2
3
3
3
4
4
4
4
5
5
5
5
5
6
6
6
6
6
6
12
12
12
12
12
12
12
12
12
12
12
12
<!-- grid 1 -->
<div class="grid grid-cols-1">
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">1</div>
</div>
</div>
<!-- grid 2 -->
<div class="grid grid-cols-1 sm:grid-cols-2">
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">2</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">2</div>
</div>
</div>
<!-- grid 3 -->
<div class="grid grid-cols-1 md:grid-cols-3">
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">3</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">3</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">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-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">4</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">4</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">4</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">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-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">5</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">5</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">5</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">5</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">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-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">6</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">6</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">6</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">6</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">6</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="p-5 h-20 w-full flex items-center justify-center">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-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="py-5 h-20 w-full">12</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="py-5 h-20 w-full">12</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="py-5 h-20 w-full">12</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="py-5 h-20 w-full">12</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="py-5 h-20 w-full">12</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="py-5 h-20 w-full">12</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="py-5 h-20 w-full">12</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="py-5 h-20 w-full">12</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="py-5 h-20 w-full">12</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="py-5 h-20 w-full">12</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="py-5 h-20 w-full">12</div>
</div>
<div class="px-4 w-full border border-primary-200 dark:border-primary-950 shadow-inset-fixed">
<div class="py-5 h-20 w-full">12</div>
</div>
</div>