Simple Grid System

A Simple SASS Grid System.

Build Status Latest Stable Version License

Links:

Normal grid

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Code
<div class="container">
	<div class="row">
		<div class="col-md-1"></div>
		<div class="col-md-11"></div>
	</div>
	<div class="row">
		<div class="col-md-2"></div>
		<div class="col-md-10"></div>
	</div>
	<div class="row">
		<div class="col-md-3"></div>
		<div class="col-md-9"></div>
	</div>
	<div class="row">
		<div class="col-md-4"></div>
		<div class="col-md-8"></div>
	</div>
	<div class="row">
		<div class="col-md-5"></div>
		<div class="col-md-7"></div>
	</div>
	<div class="row">
		<div class="col-md-6"></div>
		<div class="col-md-6"></div>
	</div>
	<div class="row">
		<div class="col-md-7"></div>
		<div class="col-md-5"></div>
	</div>
	<div class="row">
		<div class="col-md-8"></div>
		<div class="col-md-4"></div>
	</div>
	<div class="row">
		<div class="col-md-9"></div>
		<div class="col-md-3"></div>
	</div>
	<div class="row">
		<div class="col-md-10"></div>
		<div class="col-md-2"></div>
	</div>
	<div class="row">
		<div class="col-md-11"></div>
		<div class="col-md-1"></div>
	</div>
</div>

Offset grid

 
 
Code
<div class="container">
	<div class="row">
		<div class="col-md-3"></div>
		<div class="col-md-3 col-md-offset-6"></div>
	</div>
</div>

Order swap

 
 
Code
<div class="container">
	<div class="row">
		<div class="col-md-4 col-md-push-8"></div>
		<div class="col-md-8 col-md-pull-4"></div>
	</div>
</div>

Nested grids

 
 
Code
<div class="container">
	<div class="row">
		<div class="col-md-10 col-md-pull-1 col-md-push-1">
			<div class="row">
				<div class="col-md-9 col-md-push-3"></div>
				<div class="col-md-3 col-md-pull-9"></div>
			</div>
		</div>
	</div>
</div>

Mixed: mobile and desktop

 
 
Code
<div class"container">
	<div class="row">
		<div class="col-xs-6 col-md-8"></div>
		<div class="col-xs-6 col-md-4"></div>
	</div>
</div>

Offset, push, and pull resets

 
 
 
 
Code
<div class="container">
	<div class="row">
		<div class="col-sm-5 col-md-6"></div>
		<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0"></div>
	</div>
	<div class="row">
		<div class="col-sm-6 col-md-5 col-lg-6"></div>
		<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0"></div>
	</div>
</div>