Grids

Robotech
/
UI Kit
/
Grids

Grid Options

Small Grid

sm:col-span-12

Medium Grid

md:col-span-6

Large Grid

lg:col-span-4

Extra Large Grid

xl:col-span-3


<h6 class="mb-4 font-medium text-sm dark:text-slate-400">Small Grid</h6>
<div class="grid sm:grid-cols-12 gap-4">
    <div class="sm:col-span-12 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">sm:col-span-12</h6>
    </div><!--end col-->
</div><!--end grid-->

<h6 class="my-4 font-medium text-sm  dark:text-slate-400">Medium Grid</h6>
<div class="grid sm:grid-cols-12 md:grid-cols-12 gap-4">
    <div class="sm:col-span-12 md:col-span-6 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">md:col-span-6</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">md:col-span-6</h6>
    </div><!--end col-->
</div><!--end grid-->

<h6 class="my-4 font-medium text-sm  dark:text-slate-400">Large Grid</h6>
<div class="grid sm:grid-cols-12 md:grid-cols-12 lg:grid-cols-12 gap-4">
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">lg:col-span-4</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">lg:col-span-4</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">lg:col-span-4</h6>
    </div><!--end col-->
</div><!--end grid-->

<h6 class="my-4 font-medium text-sm  dark:text-slate-400">Extra Large Grid</h6>
<div class="grid sm:grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4">
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-3</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-3</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-3</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-3</h6>
    </div><!--end col-->
</div><!--end grid-->

Grid Example

xl:col-span-1

xl:col-span-2

xl:col-span-3

xl:col-span-4

xl:col-span-6

xl:col-span-12


<div class="grid sm:grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4 mb-4">
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-1</h6>
    </div><!--end col-->
</div><!--end grid-->

<div class="grid sm:grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4 mb-4">
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-2 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-2</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-2 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-2</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-2 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-2</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-2 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-2</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-2 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-2</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-2 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-2</h6>
    </div><!--end col-->                                        
</div><!--end grid-->

<div class="grid sm:grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4 mb-4">
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-3</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-3</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-3</h6>
    </div><!--end col-->  
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-3</h6>
    </div><!--end col-->                                    
</div><!--end grid-->

<div class="grid sm:grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4 mb-4">
    <div class="sm:col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-4 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-4</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-4 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-4</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-4 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-4</h6>
    </div><!--end col-->                                   
</div><!--end grid-->

<div class="grid sm:grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4 mb-4">
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-6 xl:col-span-6 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-6</h6>
    </div><!--end col-->
    <div class="sm:col-span-12 md:col-span-6 lg:col-span-6 xl:col-span-6 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-6</h6>
    </div><!--end col-->                               
</div><!--end grid-->

<div class="grid sm:grid-cols-12 md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-4">
    <div class="sm:col-span-12 md:col-span-12 lg:col-span-12 xl:col-span-12 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">xl:col-span-12</h6>
    </div><!--end col-->                          
</div><!--end grid-->

Starting and ending

col-span-3

col-span-8

col-span-1

                                       
<div class="grid grid-cols-12 gap-4 mb-4">
    <div class="col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700 col-start-1 col-end-4">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">col-span-3</h6>
    </div><!--end col-->
     
    <div class="col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700 col-end-13">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">col-span-3</h6>
    </div><!--end col-->                                    
</div><!--end grid-->

<div class="grid grid-cols-12 gap-4 mb-4">
    <div class="col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700 col-start-4">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">col-span-3</h6>
    </div><!--end col-->
     
    <div class="col-span-3 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700 col-start-7">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">col-span-3</h6>
    </div><!--end col-->                                    
</div><!--end grid-->

<div class="grid grid-cols-12 gap-4 mb-4">
    <div class="col-span-8 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700 col-start-3">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">col-span-8</h6>
    </div><!--end col-->                               
</div><!--end grid-->

<div class="grid grid-cols-5 gap-4 mb-4">
    <div class="col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700 col-start-1">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">col-span-1</h6>
    </div><!--end col-->    
    <div class="col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700 col-start-3">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">col-span-1</h6>
    </div><!--end col-->                               
    <div class="col-span-1 bg-slate-50 dark:bg-slate-700/25 text-center p-4 rounded-md border border-slate-100 dark:border-slate-700 col-start-5">
        <h6 class="text-sm font-medium text-slate-500 dark:text-slate-400">col-span-1</h6>
    </div><!--end col-->    
</div><!--end grid-->

@@include("partials/footer/footer.html")