PixelSpoke Grid System

12-column grid layout

By default, the grid is composed of 12 columns. You can modify the number of columns by updating the $grid-columns SCSS variable


	<div class="prow">
		<div class="pcol:1"></div>
		<div class="pcol:1"></div>
		<div class="pcol:1"></div>
		<div class="pcol:1"></div>
		<div class="pcol:1"></div>
		<div class="pcol:1"></div>
		<div class="pcol:1"></div>
		<div class="pcol:1"></div>
		<div class="pcol:1"></div>
		<div class="pcol:1"></div>
		<div class="pcol:1"></div>
		<div class="pcol:1"></div>
		<div class="pcol:2"></div>
		<div class="pcol:2"></div>
		<div class="pcol:2"></div>
		<div class="pcol:2"></div>
		<div class="pcol:2"></div>
		<div class="pcol:2"></div>
		<div class="pcol:3"></div>
		<div class="pcol:3"></div>
		<div class="pcol:3"></div>
		<div class="pcol:3"></div>
		<div class="pcol:5"></div>
		<div class="pcol:7"></div>
		<div class="pcol:6"></div>
		<div class="pcol:6"></div>
	</div>
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
5
7
6
6

Row columns

You can specify the number of columns in a row


	<div class="prow prow-md:2 prow-lg:3 prow-xl:5">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>

Equal-width

By default every grid item automatically take all the (remaining) available space in a row.


	<div class="prow">
		<div class="pcol"></div>
		<div class="pcol"></div>
		<div class="pcol"></div>
	</div>

Auto-sized

Auto-sized for flexbox grid columns means you can set the width of one column and have the sibling columns automatically resize around it.


	<div class="prow">
		<div class="pcol"></div>
		<div class="pcol:8"></div>
		<div class="pcol"></div>
	</div>

Mix-&-match

Use a combination of different classes for each tier as needed.
We can use the .pcol-{breakpoint}:{number}, .pcol-{breakpoint}, and .pcol:{number} variations to modify the number of columns occupied by a grid item at a specific breakpoint


	<div class="prow">
		<div class="pcol:12"></div>
		<div class="pcol-md:6 pcol-lg:5 pcol-xl:4"></div>
		<div class="pcol-md:6 pcol-lg:7 pcol-xl:8"></div>
		<div class="pcol:8"></div>
		<div class="pcol:4"></div>
		<div class="pcol-md:4"></div>
		<div class="pcol-md:4"></div>
		<div class="pcol-md:4"></div>
	</div>

Distribution

Using flexbox utility classes we can align the grid items


	<div class="prow justify-center">
		<div class="pcol:8"></div>
	</div>

Offsetting Columns

Move columns to the right using .offset-{breakpoint}:{number} classes.


	<div class="prow">
		<div class="pcol:6 offset:6"></div>
		<div class="pcol:3"></div>
		<div class="pcol:3 offset:6"></div>
	</div>

Basic Layout

Header
Main
Footer