Grid
Simple 12 Column Grid
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="grid grid-cols-12 gap-05 bg-primary-5 p-2 overflow-hidden overflow-x-auto">
<div class=" p-2 h-4 bg-light text-dark grid place-content-center">01</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">02</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">03</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">04</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">05</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">06</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">07</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">08</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">09</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">10</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">11</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">12</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">13</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">14</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">15</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">16</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">17</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">18</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">19</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">20</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">21</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">22</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">23</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">24</div>
</div> Simple 4X4 Grid
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
<div class="grid grid-rows-4 grid-cols-4 gap-05 bg-primary-5 p-2 overflow-hidden overflow-x-auto">
<div class=" p-2 h-4 bg-light text-dark grid place-content-center">01</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">02</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">03</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">04</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">05</div>
<div class=" p-2 h-4 bg-light text-dark grid place-content-center">06</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">07</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">08</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">09</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">10</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">11</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">12</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">13</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">14</div>
<div class="p-2 h-4 bg-light text-dark grid place-content-center">15</div>
<div class=" p-2 h-4 bg-light text-dark grid place-content-center">16</div>
</div> Grid Column and Row Span
01
02
03
04
05
06
07
<div class="grid grid-cols-12 grid-rows-3 gap-1 bg-primary-5 p-2 overflow-hidden overflow-x-auto">
<div class="row-span-full bg-light text-dark p-2 grid place-content-center">01</div>
<div class="bg-light text-dark p-2 grid place-content-center">02</div>
<div class="row-span-2 bg-light text-dark p-2 grid place-content-center">03</div>
<div class="col-span-2 row-span-3 bg-light text-dark p-2 grid place-content-center">04</div>
<div class="bg-light text-dark p-2 grid place-content-center">05</div>
<div class="bg-light text-dark p-2 grid place-content-center">06</div>
<div class="col-span-5 row-span-2 bg-light text-dark p-2 grid place-content-center">07</div>
</div>