Grid

Grid Example

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

	
	 
	<div class="grid w-full grid-cols-12 gap-6">
		<div class="col-span-6 p-3 text-white bg-primary rounded-lg dark:text-title-dark mb-4">1 of 2</div>
		<div class="col-span-6 p-3 text-white bg-primary rounded-lg dark:text-title-dark mb-4">2 of 2</div>
		<div class="col-span-4 p-3 text-white bg-primary rounded-lg dark:text-title-dark mb-4">1 of 3</div>
		<div class="col-span-4 p-3 text-white bg-primary rounded-lg dark:text-title-dark mb-4">2 of 3</div>
		<div class="col-span-4 p-3 text-white bg-primary rounded-lg dark:text-title-dark mb-4">3 of 3</div>
	</div>

Grid Example 2

col-span-1

col-span-2

col-span-3

col-span-4

col-span-5

col-span-7

col-span-6

col-span-8

col-span-4

col-span-9

col-span-10

col-span-2

col-span-12

	
	 
	<div class="grid md:grid-cols-12 gap-6">
		<div class="col-span-1 text-center bg-primary text-white p-2 rounded-lg"><span>col-span-1</span></div>
		<div class="col-span-2 text-center bg-primary text-white p-2 rounded-lg"><span>col-span-2</span></div>
		<div class="col-span-2 text-center bg-primary text-white p-2 rounded-lg"><span>col-span-2</span></div>
		<div class="col-span-3 text-center bg-primary text-white p-2 rounded-lg"><span>col-span-3</span></div>
		<div class="col-span-4 text-center bg-primary text-white p-2 rounded-lg"><span>col-span-4</span></div>
		<div class="col-span-5 text-center bg-primary text-white p-2 rounded-lg"><span>col-span-5</span></div>
		<div class="col-span-7 text-center bg-primary text-white p-2 rounded-lg"><span>col-span-7</span></div>
		<div class="col-span-6 text-center bg-primary text-white p-2 rounded-lg"><span>col-span-6</span></div>
		<div class="col-span-6 text-center bg-primary text-white p-2 rounded-lg"><span>col-span-6</span></div>
		<div class="col-span-8 text-center bg-primary text-white p-2 rounded-lg"><span>col-span-8</span></div>
		<div class="col-span-4 text-center bg-primary text-white p-2 rounded-lg"><span>col-span-4</span></div>
		<div class="col-span-9 text-center bg-primary text-white p-2 rounded-lg"><span>col-span-9</span></div> 
		<div class="col-span-10 text-center bg-primary text-white p-2 rounded-lg"><span>col-span-10</span></div>
		<div class="col-span-2 text-center bg-primary text-white p-2 rounded-lg"><span>col-span-2</span></div>
		<div class="col-span-12 text-center bg-primary text-white p-2 rounded-lg"><span>col-span-12</span></div>
	</div>