Grid | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Grid

##### Grid Options

Bootstrap grid system allow all six breakpoints, and any breakpoints you can customize.

| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px | Extra extra large ≥1400px
--- | --- | --- | --- | --- | --- | ---
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints
Max container width | None (auto) | 575px | 767px | 991px | 1199px | 1399px
Class prefix | `.col-span-` | `sm:col-spam-` | `md:col-span-` | `lg:col-span-` | `xl:col-span-` | `xxl:col-span-`
# of columns | 12
Gutter width | 1.5rem (.75rem on left and right)
Nestable | Yes
Offsets | Yes
Column ordering | Yes

##### Grid for Columns

Use predefined grid classes. Using `md:col-span-*` you can set the grid system.

md:col-span-1
md:col-span-2
md:col-span-2
md:col-span-3
md:col-span-4
md:col-span-5
md:col-span-7
md:col-span-6
md:col-span-6
md:col-span-8
md:col-span-4
md:col-span-9
md:col-span-3
md:col-span-10
md:col-span-2
md:col-span-12

##### Enable Flex Behaviors

Use `flex` and `inline-flex` classes to set the flex behaviors.

I'm a flexbox container!
I'm an inline flexbox container!

    <div class="flex-behaviors">
     <div class="flex p-2">I'm a flexbox container!</div>
     <div class="inline-flex p-2">I'm an inline flexbox container!</div>
    </div>

##### Horizontal Gutters

`gx-*` classes can be used to control the horizontal gutter widths. The `container` or `container-fluid` parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility.

Custom column padding
Custom column padding

    <div class="container px-4 text-center">
     <div class="grid grid-cols-12 gap-3">
       <div class="col-auto">
         <div class="p-3"><span>Custom column padding</span></div>
       </div>
       <div class="col-auto">
         <div class="p-3"><span>Custom column padding</span></div>
       </div>
     </div>
    </div>

##### Vertical Gutters

Use`gap-*` classes control vertical space between elements in rows, especially when they wrap and wider spacing can overflow the page and wrap the `row` with `overflow-hidden` to prevent this.

Custom column padding
Custom column padding
Custom column padding
Custom column padding

    <div class="container overflow-hidden text-center">
     <div class="grid grid-cols-12 gap-3">
       <div class="col-span-6">
         <div class="p-3"><span>Custom column padding</span></div>
       </div>
       <div class="col-span-6">
         <div class="p-3"><span>Custom column padding</span></div>
       </div>
       <div class="col-span-6">
         <div class="p-3"><span>Custom column padding</span></div>
       </div>
       <div class="col-span-6">
         <div class="p-3"><span>Custom column padding</span></div>
       </div>
     </div>
    </div>

##### No Gutters

Use `gap-0` on the `row` to eliminate spacing between columns.`container` and use `mx-0` on the `grid` to prevent overflow.

sm:col-span-6 & md:col-span-8
md:col-span-4

    <div class="grid g-0 text-center">
     <div class="col-span-8 md:col-span-6 sm:col-span-12">
       <div class="p-3"><span>sm:col-span-6 & md:col-span-8</span></div>
     </div>
     <div class="col-span-4 md:col-span-12">
       <div class="p-3"><span class="col-span-6">md:col-span-4</span></div>
     </div>
    </div>

##### Vertical Alignment

Use`items-*` class to set the vertical alignment.

one column
two column
one column
two column
one column
two column

    <div class="grid grid-cols-12">
     <div class="col-span-4 lg:col-span-12">
       <div class="grid grid-cols-12 grid-vertical align-items-start m-1 gap-2">
         <div class="col-span-6"><span class="bg-white">one column</span></div>
         <div class="col-span-6"><span class="bg-white">two column</span></div>
       </div>
     </div>
     <div class="col-span-4 lg:col-span-12">
       <div class="grid grid-cols-12 grid-vertical align-items-center m-1 gap-2">
         <div class="col-span-6"><span class="bg-white">one column</span></div>
         <div class="col-span-6"><span class="bg-white">two column</span></div>
       </div>
     </div>
     <div class="col-span-4 lg:col-span-12">
       <div class="grid grid-cols-12 grid-vertical align-items-end m-1 gap-2">
         <div class="col-span-6"><span class="bg-white">one column</span></div>
         <div class="col-span-6"><span class="bg-white">two column</span></div>
       </div>
     </div>
    </div>

##### Nesting

To nest your content with the default grid, add a new`row` and set of `col-sm-*` columns within an existing `col-sm-*` column.

Level 1: .col-span-3
Level 2: .col-span-5
Level 2: .col-span-7
Level 1: .col-span-2
Level 1: .col-span-10
Level 2: .col-span-4

    <div class="grid grid-cols-12 gap-3 items-center">
     <div class="col-span-3"><span>Level 1: .col-span-3</span></div>
     <div class="col-span-9">
         <div class="grid-wrapper pb-0">
             <div class="grid grid-cols-12 gap-x-2">
                 <div class="col-span-5"><span class="border border-2 !mb-0">Level 2: .col-span-5</span></div>
                 <div class="col-span-7"><span class="border border-2 !mb-0">Level 2: .col-span-7</span></div>
             </div>
         </div>
     </div>
     <div class="col-span-8">
         <div class="grid-wrapper pb-0">
             <div class="grid grid-cols-12 gap-x-2">
                 <div class="col-span-2 sm:col-span-4"><span class="border border-2 !mb-0">Level 1: .col-span-2</span></div>
                 <div class="col-span-10 sm:col-span-8"><span class="border border-2 !mb-0">Level 1: .col-span-10</span></div>
             </div>
         </div>
     </div>
     <div class="col-span-4"><span>Level 2: .col-span-4</span></div>
    </div>

##### Order

Use `order` class, you can set the order position.

First Item (order-3)
Second Item (order-first)
Third Item (order-last)
Fourth Item (order-2)
fifth Item (order-5)
sixth Item (order-4)

    <div class="grid grid-cols-12 gap-2">
     <div class="col-span-3 order-3"><span>First Item (order-3)</span></div>
     <div class="col-span-6 order-first"><span>Second Item (order-first)</span></div>
     <div class="col-span-4 order-last"><span>Third Item (order-last)</span></div>
     <div class="col-span-3 order-2"><span>Fourth Item (order-2)</span></div>
     <div class="col-span-2 sm:col-span-4 order-5"><span>fifth Item (order-5)</span></div>
     <div class="col-span-6 sm:col-span-4 order-4"><span>sixth Item (order-4)</span></div>
    </div>

##### Offset

Move columns to the right using `sm:col-start-*` classes. These classes increase the left margin of a column by `*` columns.

col-5 offset-sm-3
col-2 offset-sm-2
col-4 offset-sm-2
col-3 offset-sm-2

    <div class="grid grid-cols-12">
     <div class="col-span-5 sm:col-span-4 col-start-3 sm:col-start-3"><span>col-5 offset-sm-3</span></div>
     <div class="col-span-4 sm:col-span-4 col-start-10 sm:col-start-2"><span>col-2 offset-sm-2</span></div>
     <div class="col-span-4 sm:col-span-5 col-start-2"><span>col-4 offset-sm-2</span></div>
     <div class="col-span-3 sm:col-span-4 col-start-8"><span>col-3 offset-sm-2</span></div>
    </div>