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.
Grid Template Columns
Specifying the columns in a grid
Use the 'grid-cols-{n}' utilities will help
you create grids of equal sized columns
<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}
<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>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.
<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.
<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.
<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.
<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}’
<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>Gap
Setting the gap between elements
‘gap-{size}’ can be used to set gaps for
both rows and columns in grid and flexbox layouts.
<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.
<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>