Modernize TailwindCSS HTML Admin Template

Grid

Home
Grid

Specifying the columns in a grid

Specifying the columns in a grid - View Code

       
<div class="grid grid-cols-4 gap-4 font-mono text-white text-sm text-center font-bold bg-stripes-indigo dark:bg-stripes-indigo rounded-md">
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">01</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">02</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">03</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">04</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">05</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">06</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">07</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">08</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">09</div>
</div>

Use the 'grid-cols-{n}' utilities to create grids with n equally sized columns.

Spanning columns

Spanning columns - View Code

       
<div class="grid grid-cols-3 gap-4 font-mono text-white text-sm text-center font-bold">
   <div class="p-4 rounded-md bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">01</div>
   <div class="p-4 rounded-md bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">02</div>
   <div class="p-4 rounded-md bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">03</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500 col-span-2">04</div>
   <div class="p-4 rounded-md bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">05</div>
   <div class="p-4 rounded-md bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">06</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500 col-span-2">07</div>
</div>

Use the 'col-span-{n}' utilities to make an element span n columns.

Starting and ending lines

Starting and ending lines - View Code

       
<div class="grid grid-cols-6 gap-4 font-mono text-white text-sm text-center font-bold">
   <div class="p-4 rounded-md bg-stripes-indigo dark:bg-stripes-indigo"></div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500 col-start-2 col-span-4">01</div>
   <div class="p-4 rounded-md bg-stripes-indigo dark:bg-stripes-indigo"></div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500 col-start-1 col-end-3">02</div>
   <div class="p-4 rounded-md bg-stripes-indigo dark:bg-stripes-indigo"></div>
   <div class="p-4 rounded-md bg-stripes-indigo dark:bg-stripes-indigo"></div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500 col-end-7 col-span-2">03</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500 col-start-1 col-end-7">04</div>
</div>

Use the 'col-start-{n}' and 'col-end-{n}' utilities to make an element start or end at the nth grid line. These can also be combined with the 'col-span-{n}' utilities to span a specific number of columns.

Equal width

Equal width - View Code

       
<div class="grid grid-cols-12 gap-4 font-mono text-white text-sm text-center font-bold bg-stripes-indigo dark:bg-stripes-indigo rounded-md">
   <div class="col-span-4 p-4 rounded-md shadow-lg bg-indigo-500">Column</div>
   <div class="col-span-4 p-4 rounded-md shadow-lg bg-indigo-500">Column</div>
   <div class="col-span-4 p-4 rounded-md shadow-lg bg-indigo-500">Column</div>
</div>

Every column width same size example.

Column

Specifying the rows in a grid

Specifying the rows in a grid - View Code

       
<div class="grid grid-rows-4 grid-flow-col gap-4 font-mono text-white text-sm text-center font-bold bg-stripes-indigo dark:bg-stripes-indigo rounded-md">
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">01</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">02</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">03</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">04</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">05</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">06</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">07</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">08</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">09</div>
</div>

Use the 'grid-rows-{n}' utilities to create grids with n equally sized rows.

Spanning rows

Spanning rows - View Code

       
<div class="grid grid-rows-3 grid-flow-col gap-4 font-mono text-white text-sm text-center font-bold bg-stripes-indigo dark:bg-stripes-indigo rounded-md">
   <div class="p-4 rounded-md shadow-lg bg-indigo-500 grid place-content-center row-span-3">01</div>
   <div class="p-4 rounded-md bg-indigo-300 grid place-content-center col-span-2 dark:bg-indigo-800 dark:text-indigo-400">02</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500 grid place-content-center row-span-2 col-span-2">03</div>
</div>

Use the 'row-span-{n}' utilities to make an element span n rows.

Starting and ending lines

Starting and ending lines - View Code

       
<div class="grid grid-rows-3 grid-flow-col gap-4 font-mono text-white text-sm text-center font-bold bg-stripes-indigo dark:bg-stripes-indigo rounded-md">
   <div class="p-4 rounded-md shadow-lg bg-indigo-500 grid place-content-center row-span-3">01</div>
   <div class="p-4 rounded-md bg-indigo-300 grid place-content-center col-span-2 dark:bg-indigo-800 dark:text-indigo-400">02</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500 grid place-content-center row-span-2 col-span-2">03</div>
</div>

Use the 'row-start-{n}' and 'row-end-{n}' utilities to make an element start or end at the nth grid line. These can also be combined with the 'row-span-{n}' utilities to span a specific number of rows.

Controlling grid element placement

Controlling grid element placement - View Code

       
<div class="grid grid-cols-3 grid-rows-3 grid-flow-row-dense gap-4 font-mono text-white text-sm text-center font-bold bg-stripes-indigo dark:bg-stripes-indigo rounded-md">
   <div class="p-4 col-span-2 rounded-md bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">01</div>
   <div class="p-4 col-span-2 rounded-md bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">02</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">03</div>
   <div class="p-4 rounded-md bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">04</div>
   <div class="p-4 rounded-md bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">05</div>
</div>

Use the 'grid-flow-{keyword}' utilities to control how the auto-placement algorithm works for a grid layout.

Setting the gap between elements

Setting the gap between elements - View Code

       
<div class="grid grid-cols-2 gap-4 font-mono text-white text-sm text-center font-bold bg-stripes-indigo dark:bg-stripes-indigo rounded-md">
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">01</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">02</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">03</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">04</div>
</div>

Use the 'gap-{size}' to change the gap between both rows and columns in grid and flexbox layouts.

Changing row and column gaps independently

Changing row and column gaps independently - View Code

       
<div class="grid grid-cols-3 gap-x-8 gap-y-4 font-mono text-white text-sm text-center font-bold bg-stripes-indigo dark:bg-stripes-indigo rounded-md">
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">01</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">02</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">03</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">04</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">05</div>
   <div class="p-4 rounded-md shadow-lg bg-indigo-500">06</div>
</div>

Use the 'gap-x-{size}' and 'gap-x-{size}' to change the gap between rows and columns independently.

Chat Application

User Profile App

Contact Application

Email App

eCommerce App

Calendar App

Account Setting App

Notes Application

Quick Links

Notifications

Launch Admin

Meeting Today

New Payment received

Pay Bills

Go for Event

User Profile

Mathew Anderson

My Profile

My Inbox

My Tasks

Unlimited Access

Chat Application

User Profile App

Contact Application

Email App

eCommerce App

Calendar App

Account Setting App

Notes Application

Quick Links

Notifications

Launch Admin

Meeting Today

New Payment received

Pay Bills

Go for Event

User Profile

Mathew Anderson

My Profile

My Inbox

My Tasks

Unlimited Access

Grid

Specifying the columns in a grid

Specifying the columns in a grid - View Code

Spanning columns

Spanning columns - View Code

Starting and ending lines

Starting and ending lines - View Code

Equal width

Equal width - View Code

Specifying the rows in a grid

Specifying the rows in a grid - View Code

Spanning rows

Spanning rows - View Code

Starting and ending lines

Starting and ending lines - View Code

Controlling grid element placement

Controlling grid element placement - View Code

Setting the gap between elements

Setting the gap between elements - View Code

Changing row and column gaps independently

Changing row and column gaps independently - View Code

Chat Application

User Profile App

Contact Application

Email App

eCommerce App

Calendar App

Account Setting App

Notes Application

Quick Links

Quick Page Links

Shopping Cart

Supreme toys cooker

$250

Supreme toys cooker

$250

Supreme toys cooker

$250

Unlimited
Access

Unlimited
Access