Layout

Tailwind CSS Grid

Tailwind css provides responsive flexbox grids using a twelve column system which lets you design various custom layouts of different shapes and sizes using different classes.

image

Grid Template Columns

Specifying the columns in a grid

Use the 'grid-cols-{n}' utilities will help you create grids of equal sized columns

01
02
03
04
05
06
07
08 
 <div class="grid grid-cols-4 gap-4 text-white text-sm text-center font-bold leading-6">
        <div class="p-4 rounded-lg shadow-lg bg-indigo-600">01</div>
        <div class="p-4 rounded-lg shadow-lg bg-indigo-600">02</div>
        <div class="p-4 rounded-lg shadow-lg bg-indigo-600">03</div>
        <div class="p-4 rounded-lg shadow-lg bg-indigo-600">04</div>
        <div class="p-4 rounded-lg shadow-lg bg-indigo-600">05</div>
        <div class="p-4 rounded-lg shadow-lg bg-indigo-600">06</div>
        <div class="p-4 rounded-lg shadow-lg bg-indigo-600">07</div>
        <div class="p-4 rounded-lg shadow-lg bg-indigo-600">08</div>
        </div>

Grid Column Start / End

Spanning columns

number of columns a cell can span can be controlled using col-span-{n}

01
02
03
04
05
06
07 
<div class="grid grid-cols-3 gap-4 text-white text-sm text-center font-bold leading-6">
        <div class="p-4 rounded-lg bg-indigo-300">01</div>
        <div class="p-4 rounded-lg bg-indigo-300">02</div>
        <div class="p-4 rounded-lg bg-indigo-300">03</div>
        <div class="p-4 rounded-lg shadow-lg bg-indigo-600 col-span-2">04</div>
        <div class="p-4 rounded-lg bg-indigo-300">05</div>
        <div class="p-4 rounded-lg bg-indigo-300">06</div>
        <div class="p-4 rounded-lg shadow-lg bg-indigo-600 col-span-2">07</div>
        </div>

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

Starting and ending lines

Use the 'col-start-{n}' and 'col-end-{n}' utilities can be used as shown in the following example

CSS grid lines start from 1 and not 0 and hence, in a typical 6 column grid it will start from 1 and end at 7.

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

Grid Template Rows

Specifying the rows in a grid

When one needs to design equal sized rows 'grid-rows-{n}’ can be used as mentioned below.

01
02
03
04
05
06
07
08
09
 <div class="grid grid-rows-4 grid-flow-col gap-4 text-white text-sm text-center font-bold leading-6">
        <div class="p-4 rounded-lg bg-indigo-600">01</div>
        <div class="p-4 rounded-lg bg-indigo-600">02</div>
        <div class="p-4 rounded-lg bg-indigo-600">03</div>
        <div class="p-4 rounded-lg bg-indigo-600">04</div>
        <div class="p-4 rounded-lg bg-indigo-600">05</div>
        <div class="p-4 rounded-lg bg-indigo-600">06</div>
        <div class="p-4 rounded-lg bg-indigo-600">07</div>
        <div class="p-4 rounded-lg bg-indigo-600">08</div>
        <div class="p-4 rounded-lg bg-indigo-600">09</div>
        </div>

Grid Row Start / End

Spanning rows

By using 'row-span-{n}’ rows of different span can be placed as required.

01
02
03 
<div class="grid grid-rows-3 grid-flow-col gap-4 text-white text-sm text-center font-bold leading-6">
        <div class="p-4 rounded-lg shadow-lg bg-indigo-600 grid place-content-center row-span-3">01</div>
        <div class="p-4 rounded-lg  bg-indigo-300 grid place-content-center col-span-2 ">02</div>
        <div class="p-4 rounded-lg shadow-lg bg-indigo-600 grid place-content-center row-span-2 col-span-2">03</div>
        </div>

Starting and ending lines

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.

CSS grid lines start from 1 and not 0 and hence, in a typical 6 row grid it will start from 1 and end at 7.

01
02
03 
<div class="grid grid-rows-3 grid-flow-col gap-4 bg-stripes-indigo rounded-lg text-white text-sm text-center font-bold leading-6">
        <div class="p-4 sm:p-12 rounded-lg shadow-lg bg-indigo-600 grid place-content-center row-start-2 row-span-2">01</div>
        <div class="p-4 sm:p-12 rounded-lg shadow-lg bg-indigo-600 grid place-content-center row-end-3 row-span-2">02</div>
        <div class="p-4 sm:p-12 rounded-lg shadow-lg bg-indigo-600 grid place-content-center row-start-1 row-end-4">03</div>
        </div>

Grid Auto Flow

Controlling grid element placement

Auto placement algorithm can be set using ‘grid-flow-{keyword}’

01
02
03
04
05
<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 leading-6 bg-stripes-indigo rounded-lg">
        <div class="p-4 col-span-2 rounded-lg bg-indigo-300 ">01</div>
        <div class="p-4 col-span-2 rounded-lg bg-indigo-300 ">02</div>
        <div class="p-4 rounded-lg shadow-lg bg-indigo-600">03</div>
        <div class="p-4 rounded-lg bg-indigo-300">04</div>
        <div class="p-4 rounded-lg bg-indigo-300">05</div>
        </div>

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

Gap

Setting the gap between elements

‘gap-{size}’ can be used to set gaps for both rows and columns in grid and flexbox layouts.

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

Changing row and column gaps independently

By using ‘gap-x{size}’ and 'gap-y(size}’ can be used to adjust gaps of rows and columns individually.

01
02
03
04
05
06 
<div class="grid grid-cols-2 gap-4 font-mono text-white text-sm text-center font-bold leading-6 bg-stripes-indigo rounded-lg">
        <div class="p-4 rounded-lg shadow-lg bg-indigo-600">01</div>
        <div class="p-4 rounded-lg shadow-lg bg-indigo-600">02</div>
        <div class="p-4 rounded-lg shadow-lg bg-indigo-600">03</div>
        <div class="p-4 rounded-lg shadow-lg bg-indigo-600">04</div>
        </div>

Figma

You can also find this component in Figma. Check the Pagedone Figma Design System.

Preview Buy Now
image

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More