Grids | Examples | CERN web framework

Example 1: straight-up 5-column:

I am the first column!

I am the second column!

I am the third column!

I am the fourth column!

I am the fifth, and last column!

Markup:

<div class="grid clearfix">
	
	<div class="column">
		I am the first column!
	</div>

	<div class="column">
		I am the second column!
	</div>
	
	<div class="column">
		I am the third column!
	</div>

	<div class="column">
		I am the fourth column!
	</div>
	
	<div class="column last">
		I am the fifth, and last column!
	</div>

</div>

Example 2: 1-2-1-1:

I am the first column!

I am the second column! I am wide!

I am the third column!

I am the fourth, and last column!

Markup:

<div class="grid clearfix">
	
	<div class="column">
		I am the first column!
	</div>

	<div class="column span_two">
		I am the second column! I am wide!
	</div>
	
	<div class="column">
		I am the third column!
	</div>
	
	<div class="column last">
		I am the fourth, and last column!
	</div>

</div>

Example 3: nested columns:

I am the first column!

I am the second and last column! I am wide!

I am the first nested column!

I am the second nested column!

I am the third and last nested column! And I'm wide!

Markup:

<div class="grid clearfix">
	
	<div class="column">
		I am the first column!
	</div>

	<div class="column span_four last">
		I am the second and last column! I am wide!
		
		<div class="column">
			I am the first nested column!
		</div>
		
		<div class="column">
			I am the second nested column!
		</div>
		
		<div class="column span_two last">
			I am the third and last nested column! And I'm wide!
		</div>
		
	</div>
	

</div>