Simple Grid System

  • development

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 offset-md-0"></div>
	</div>
</div>

Order swap

Code
<div class="container">
	<div class="row">
		<div class="col-md-4 order-md-12"></div>
		<div class="col-md-8 order-md-1"></div>
	</div>
</div>

Nested grids

Code
<div class="container">
	<div class="row center-md">
		<div class="col-md-10">
			<div class="row">
				<div class="col-md-9 order-md-12"></div>
				<div class="col-md-3 order-md-1"></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>

Auto width

Code
<div class="container">
	<div class="row">
		<div class="col-xs"></div>
		<div class="col-xs"></div>
		<div class="col-xs"></div>
		<div class="col-xs"></div>
		<div class="col-xs"></div>
	</div>
</div>

Mixed: mobile and desktop alignment

Code
<div class="container">
	<div class="row top-sm middle-md bottom-lg">
		<div class="col-xs"></div>
		<div class="col-xs"></div>
		<div class="col-xs"></div>
	</div>
</div>

Video embedding

Code
<div class="media">
	<iframe class="media-item" src="https://www.youtube-nocookie.com/embed/SkVqJ1SGeL0?rel=0" allowfullscreen></iframe>
</div>
  • Last modified at