Grid Columns

Grid Columns

Use grid-cols{n} to specify the number of equal size grid columns.

01
01
02
01
02
03
01
02
03
04
01
02
03
04
05
Code Example 
<div class="grid grid-cols1 bg-black m-b3 b-br2 p3 gap2">
	<div class="b-br1 bg-yellow p3">01</div>
</div>

<div class="grid grid-cols2 bg-black m-b3 b-br2 p3 gap2">
	<div class="b-br1 bg-yellow p3">01</div>
	<div class="b-br1 bg-yellow p3">02</div>
</div>

<div class="grid grid-cols3 bg-black m-b3 b-br2 p3 gap2">
	<div class="b-br1 bg-yellow p3">01</div>
	<div class="b-br1 bg-yellow p3">02</div>
	<div class="b-br1 bg-yellow p3">03</div>
</div>

<div class="grid grid-cols4 bg-black m-b3 b-br2 p3 gap2">
	<div class="b-br1 bg-yellow p3">01</div>
	<div class="b-br1 bg-yellow p3">02</div>
	<div class="b-br1 bg-yellow p3">03</div>
	<div class="b-br1 bg-yellow p3">04</div>
</div>

<div class="grid grid-cols5 bg-black m-b3 b-br2 p3 gap2">
	<div class="b-br1 bg-yellow p3">01</div>
	<div class="b-br1 bg-yellow p3">02</div>
	<div class="b-br1 bg-yellow p3">03</div>
	<div class="b-br1 bg-yellow p3">04</div>
	<div class="b-br1 bg-yellow p3">05</div>
</div>

Grid Column Patterns

Use grid-{name} to specify different grid layouts using compound grids.

01
02
03
04
05
06
01
02
03
04
05
06
01
02
03
04
05
06
07
08
01
02
03
04
05
06
07
Code Example 
<div class="grid grid-hydrogen bg-black m-b3 b-br2 p3 gap2">
	<div class="b-br1 bg-yellow p3">01</div>
	<div class="b-br1 bg-yellow p3">02</div>
	<div class="b-br1 bg-yellow p3">03</div>
	<div class="b-br1 bg-yellow p3">04</div>
	<div class="b-br1 bg-yellow p3">05</div>
	<div class="b-br1 bg-yellow p3">06</div>
</div>

<div class="grid grid-helium bg-black m-b3 b-br2 p3 gap2">
	<div class="b-br1 bg-yellow p3">01</div>
	<div class="b-br1 bg-yellow p3">02</div>
	<div class="b-br1 bg-yellow p3">03</div>
	<div class="b-br1 bg-yellow p3">04</div>
	<div class="b-br1 bg-yellow p3">05</div>
	<div class="b-br1 bg-yellow p3">06</div>
</div>

<div class="grid grid-lithium bg-black m-b3 b-br2 p3 gap2">
	<div class="b-br1 bg-yellow p3">01</div>
	<div class="b-br1 bg-yellow p3">02</div>
	<div class="b-br1 bg-yellow p3">03</div>
	<div class="b-br1 bg-yellow p3">04</div>
	<div class="b-br1 bg-yellow p3">05</div>
	<div class="b-br1 bg-yellow p3">06</div>
	<div class="b-br1 bg-yellow p3">07</div>
	<div class="b-br1 bg-yellow p3">08</div>
</div>

<div class="grid grid-berilium bg-black m-b3 b-br2 p3 gap2">
	<div class="b-br1 bg-yellow p3">01</div>
	<div class="b-br1 bg-yellow p3">02</div>
	<div class="b-br1 bg-yellow p3">03</div>
	<div class="b-br1 bg-yellow p3">04</div>
	<div class="b-br1 bg-yellow p3">05</div>
	<div class="b-br1 bg-yellow p3">06</div>
	<div class="b-br1 bg-yellow p3">07</div>
</div>

Grid Column Gap

01
02
03
01
02
03
01
02
03
01
02
03
01
02
03
Code Example 
<div class="grid grid-cols3 bg-black m-b3 b-br2 p3 gap1">
	<div class="b-br1 bg-yellow p3">01</div>
	<div class="b-br1 bg-yellow p3">02</div>
	<div class="b-br1 bg-yellow p3">03</div>
</div>

<div class="grid grid-cols3 bg-black m-b3 b-br2 p3 gap2">
	<div class="b-br1 bg-yellow p3">01</div>
	<div class="b-br1 bg-yellow p3">02</div>
	<div class="b-br1 bg-yellow p3">03</div>
</div>

<div class="grid grid-cols3 bg-black m-b3 b-br2 p3 gap3">
	<div class="b-br1 bg-yellow p3">01</div>
	<div class="b-br1 bg-yellow p3">02</div>
	<div class="b-br1 bg-yellow p3">03</div>
</div>

<div class="grid grid-cols3 bg-black m-b3 b-br2 p3 gap4">
	<div class="b-br1 bg-yellow p3">01</div>
	<div class="b-br1 bg-yellow p3">02</div>
	<div class="b-br1 bg-yellow p3">03</div>
</div>

<div class="grid grid-cols3 bg-black m-b3 b-br2 p3 gap5">
	<div class="b-br1 bg-yellow p3">01</div>
	<div class="b-br1 bg-yellow p3">02</div>
	<div class="b-br1 bg-yellow p3">03</div>
</div>

Grid Column Start & End

Set the start and end position of each grid cell.

Start in track 2
End in track 3
Start in track 2, end in track 4
Code Example 
<div class="grid grid-cols3 bg-black m-b3 b-br2 p3 gap2">
	<div class="b-br1 bg-yellow p3 grid-col-s2">Start in track 2</div>
	<div class="b-br1 bg-yellow p3 grid-col-e3">End in track 3</div>
	<div class="b-br1 bg-yellow p3 grid-col-s2 grid-col-e4">Start in track 2, end in track 4</div>
</div>