Grids

Use our powerful mobile-first grids to build layouts of all shapes and sizes thanks to a twelve column system.

Grid Block

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 8
Content 8
Content 8
Content 8
Content 8
Content 8
Content 8
Content 8
12
12
12
12
12
12
12
12
12
12
12
12
              
<!-- grid 1 -->
<div class="grid gap-2 grid-cols-1">
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 1</div>
  </div>
</div>

<!-- grid 2 -->
<div class="grid gap-2 grid-cols-1 sm:grid-cols-2">
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 2</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 2</div>
  </div>
</div>

<!-- grid 3 -->
<div class="grid gap-2 grid-cols-1 md:grid-cols-3">
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 3</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 3</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 3</div>
  </div>
</div>

<!-- grid 4 -->
<div class="grid gap-2 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 4</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 4</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 4</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 4</div>
  </div>
</div>

<!-- grid 5 -->
<div class="grid gap-2 grid-cols-1 sm:grid-cols-3 lg:grid-cols-5">
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 5</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 5</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 5</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 5</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 5</div>
  </div>
</div>

<!-- grid 6 -->
<div class="grid gap-2 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 6</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 6</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 6</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 6</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 6</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="p-5 h-20 w-full">Content 6</div>
  </div>
</div>

<!-- grid 12 -->
<div class="grid gap-2 grid-cols-1 sm:grid-cols-3 md:grid-cols-6 lg:grid-cols-12">
  <div class="px-4 w-full border border-black">
     <div class="py-5 h-20 w-full">content 12</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="py-5 h-20 w-full">content 12</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="py-5 h-20 w-full">content 12</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="py-5 h-20 w-full">content 12</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="py-5 h-20 w-full">content 12</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="py-5 h-20 w-full">content 12</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="py-5 h-20 w-full">content 12</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="py-5 h-20 w-full">content 12</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="py-5 h-20 w-full">content 12</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="py-5 h-20 w-full">content 12</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="py-5 h-20 w-full">content 12</div>
  </div>
  <div class="px-4 w-full border border-black">
     <div class="py-5 h-20 w-full">content 12</div>
  </div>
</div>