Grid | Dreams AI Agent - Agent Builder Tailwind Admin Template

Upgrade

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>