Building grids and responsive layouts using Premise WP

With the CSS class pwp-row you can build a grid by simply assigning it to the parent element of your columns. You can then use the classes col2 - col6 to build a “column” grid or span1 - span12 to build a “fluid” grid. On column grids, columns within a row are meant to have the same width, while on fluid grids they can have different widths within the same row.

You can apply use column grid and fluid grid classes in the same grid as long as they are consistent per row. Additional classes used with ‘pwp-row’ let you have a little more control over the grid.

 

Column Grids

col2 - col6 – Meant to build grids where columns share the same width per row.

 

Fluid Grid

span1 - span12 – Meant to build grids where columns have different widths per row.

 

Additional Classes

 

Lets take a look at some examples

Column Grids

To create a 3 column grid we add the class col3 to each of our columns. This will create a grid where all columns have the same width (1/3 of the row’s width in this case). On responsive the columns simply stack. As you can probably already tell, the class col2 - col6 stand for ‘columns’ or ‘number of columns’ there should be on each row. So to create a 5 column grid we would add the class col5 to each of our columns.

 
 
 

The full source code for the grid above is the following.

<div class="pwp-row">
	<div class="col3 pwp-align-center" style="margin-bottom: 2%;">
		<div class="pwp-aspect-ratio-4-3">
			<div style="background: #ccc; ">&nbsp;</div>
		</div>
	</div>
	<div class="col3 pwp-align-center" style="margin-bottom: 2%;">
		<div class="pwp-aspect-ratio-4-3">
			<div style="background: #ccc; ">&nbsp;</div>
		</div>
	</div>
	<div class="col3 pwp-align-center" style="margin-bottom: 2%;">
		<div class="pwp-aspect-ratio-4-3">
			<div style="background: #ccc; ">&nbsp;</div>
		</div>
	</div>
</div>

 

Fluid Grids

Since fluid grids let us create girds where columns may have different widths we use the class span1 - span12 instead of col2 - col6. The span stands for how many columns (on a 12 column row) should one column span for. In other words how many columns it should occupy. If I assign the class span6 to one column that column will be half the width of the whole row. Because it occupies 6 columns out of 12 available. If I assign the class span12 to a column it will occupy the full width of the row.

Here is an example:

 
 
 
 
 
 
 
 

Here is the full source code for the grid displayed above.

<div class="pwp-row">
	<div class="span3 pwp-align-center" style="margin-bottom: 1%;">
		<div style="background: #ccc; height: 200px">&nbsp;</div>
	</div>
	<div class="span9 pwp-align-center" style="margin-bottom: 1%;">
		<div style="background: #ccc; height: 200px">&nbsp;</div>
	</div>
	<div class="span8 pwp-align-center" style="margin-bottom: 1%;">
		<div style="background: #ccc; height: 200px">&nbsp;</div>
	</div>
	<div class="span2 pwp-align-center" style="margin-bottom: 1%;">
		<div style="background: #ccc; height: 200px">&nbsp;</div>
	</div>
	<div class="span2 pwp-align-center" style="margin-bottom: 1%;">
		<div style="background: #ccc; height: 200px">&nbsp;</div>
	</div>
	<div class="span5 pwp-align-center" style="margin-bottom: 1%;">
		<div style="background: #ccc; height: 200px">&nbsp;</div>
	</div>
	<div class="span2 pwp-align-center" style="margin-bottom: 1%;">
		<div style="background: #ccc; height: 200px">&nbsp;</div>
	</div>
	<div class="span5 pwp-align-center" style="margin-bottom: 1%;">
		<div style="background: #ccc; height: 200px">&nbsp;</div>
	</div>
</div>

Send us your comments..

Your email address will not be published. Required fields are marked *