<< Go back

Basic grid


 
<div class="grid grid-cols-12">
  <div class="px-3 py-0.5 bg-purple-500">&nbsp;</div>
  <div class="px-3 py-0.5 bg-pink-500"></div>
  <div class="px-3 py-0.5 bg-orange-500"></div>
  <div class="px-3 py-0.5 bg-amber-500"></div>
  <div class="px-3 py-0.5 bg-green-500"></div>
  <div class="px-3 py-0.5 bg-blue-500"></div>
  <div class="px-3 py-0.5 bg-violet-500"></div>
  <div class="px-3 py-0.5 bg-pink-300"></div>
  <div class="px-3 py-0.5 bg-red-500"></div>
  <div class="px-3 py-0.5 bg-yellow-500"></div>
  <div class="px-3 py-0.5 bg-green-400"></div>
  <div class="px-3 py-0.5 bg-blue-400"></div>
</div>

 
<div class="grid grid-cols-6">
  <div class="px-3 py-0.5 bg-purple-500">&nbsp;</div>
  <div class="px-3 py-0.5 bg-pink-500"></div>
  <div class="px-3 py-0.5 bg-orange-500"></div>
  <div class="px-3 py-0.5 bg-amber-500"></div>
  <div class="px-3 py-0.5 bg-green-500"></div>
  <div class="px-3 py-0.5 bg-blue-500"></div>
</div>

 
<div class="grid grid-cols-4">
  <div class="px-3 py-0.5 bg-purple-500">&nbsp;</div>
  <div class="px-3 py-0.5 bg-pink-500"></div>
  <div class="px-3 py-0.5 bg-orange-500"></div>
  <div class="px-3 py-0.5 bg-amber-500"></div>
</div>

 
<div class="grid grid-cols-3">
  <div class="px-3 py-0.5 bg-purple-500">&nbsp;</div>
  <div class="px-3 py-0.5 bg-pink-500"></div>
  <div class="px-3 py-0.5 bg-orange-500"></div>
</div>

 
<div class="grid grid-cols-2">
  <div class="px-3 py-0.5 bg-purple-500">&nbsp;</div>
  <div class="px-3 py-0.5 bg-pink-500"></div>
</div>

 
<div class="grid grid-cols-1">
  <div class="px-3 py-0.5 bg-purple-500">&nbsp;</div>
</div>