gif
Don't Miss Out! Our new update has been released.
gif
Something you love is now on sale!
Buy now !
  • Bookmark
  • 2
    Cart
    • Furniture Chair for Home
      $12.45
    • Rest Well Chair
      $49.00
    • Order Total : $1000.00
    • View Cart Checkout
  • 4
    Notifications

    • Delivery processing

    • Order Complete

    • Tickets Generated

    • Delivery Complete

  • Emay Walter

    Admin

Grid

  2. Ui Kits
  3. 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>
Class Value of the class
.items-* start / center / end / baseline / stretch
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>
Class Value of the class
.order-* first / 2 / 3 / 4 / 5 / last
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>
Class Value of the class
.col-start-* 1 / 2 / ... / 10 / 11