English Espanol Japanese
Notifications
Critical alert: Server crash detected
Just now
Emiliya mentioned in you a comment
1h
Backup completed successfully
2h
Profile updated successfully
3h
Nikita sent you a friend request
Accept
2d
API updated
3d
View All
Theme
Sidebar

Grid

  1. Home
  3. Components
  5. Grid
Equal size columns
use grid-cols-{n} utilities to create grids with {n} equally sized columns.
1
2
3
4 

<div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
    <div class="p-4 rounded-lg bg-primary text-white rounded-lg shadow-xl">
        1
    </div>
    <div class="p-4 rounded-lg bg-primary text-white rounded-lg shadow-xl">
        2
    </div>
    <div class="p-4 rounded-lg bg-primary text-white rounded-lg shadow-xl">
        3
    </div>
    <div class="p-4 rounded-lg bg-primary text-white rounded-lg shadow-xl">
        4
    </div>
</div>
Col span
7/12
5/12
8/12
4/12
3/12
9/12
3/12
4/12
5/12 

<div class="grid md:grid-cols-12 gap-4">
    <div class="p-4 md:col-span-7 rounded-lg bg-primary text-white rounded-lg shadow-xl">
        7/12
    </div>
    <div class="p-4 md:col-span-5 rounded-lg bg-primary text-white rounded-lg shadow-xl">
        5/12
    </div>

    <div class="p-4 md:col-span-8 rounded-lg bg-primary text-white rounded-lg shadow-xl">
        8/12
    </div>
    <div class="p-4 md:col-span-4 rounded-lg bg-primary text-white rounded-lg shadow-xl">
        4/12
    </div> 

    <div class="p-4 md:col-span-3 rounded-lg bg-primary text-white rounded-lg shadow-xl">
        3/12
    </div>
    <div class="p-4 md:col-span-9 rounded-lg bg-primary text-white rounded-lg shadow-xl">
        9/12
    </div>

    <div class="p-4 md:col-span-3 rounded-lg bg-primary text-white rounded-lg shadow-xl">
        3/12
    </div>
    <div class="p-4 md:col-span-4 rounded-lg bg-primary text-white rounded-lg shadow-xl">
        4/12
    </div>
    <div class="p-4 md:col-span-5 rounded-lg bg-primary text-white rounded-lg shadow-xl">
        5/12
    </div>
</div>