# 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

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts