Our grid system is composed of 12 flexible columns with a gutter between columns of 30px. We apply border-box so that the border and padding is included in the width of the grid columns. Background colour added only for this example.

General example

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12
<div class="row">
	<div class="one columns"></div>
	<div class="one columns"></div>
	<div class="one columns"></div>
	<div class="one columns"></div>
	<div class="one columns"></div>
	<div class="one columns"></div>
	<div class="one columns"></div>
	<div class="one columns"></div>
	<div class="one columns"></div>
	<div class="one columns"></div>
	<div class="one columns"></div>
	<div class="one columns"></div>
</div>
<div class="row">
	<div class="two columns"></div>
	<div class="two columns"></div>
	<div class="two columns"></div>
	<div class="two columns"></div>
	<div class="two columns"></div>
	<div class="two columns"></div>
</div>
<div class="row">
	<div class="three columns"></div>
	<div class="three columns"></div>
	<div class="three columns"></div>
	<div class="three columns"></div>
</div>
<div class="row">
	<div class="four columns"></div>
	<div class="four columns"></div>
	<div class="four columns"></div>
</div>
<div class="row">
	<div class="six columns"></div>
	<div class="six columns"></div>
</div>
<div class="row">
	<div class="twelve columns"></div>
</div>

Mixed columns

1
8
3
2
4
6
3
9
1
2
3
4
2

<div class="row">
	<div class="one columns">1</div>
	<div class="eight columns">8</div>
	<div class="three columns">3</div>
</div>
<div class="row">
	<div class="two columns">2</div>
	<div class="four columns">4</div>
	<div class="six columns">6</div>

</div>
<div class="row">
	<div class="three columns">3</div>
	<div class="nine columns">9</div>
</div>
<div class="row">
	<div class="one columns">1</div>
	<div class="two columns">2</div>
	<div class="three columns">3</div>
	<div class="four columns">4</div>
	<div class="two columns">2</div>
</div>

Nested columns

6
3
3
6
3
3

<div class="row">
	<div class="six columns">
		<div class="row">
			<div class="six columns">6</div>
			<div class="three columns">3</div>
			<div class="three columns">3</div>
		</div>
	</div>
	<div class="six columns">
		<div class="row">
			<div class="six columns">6</div>
			<div class="three columns">3</div>
			<div class="three columns">3</div>
		</div>
	</div>
</div>