This project is based on: ThisIsDallas/Simple-Grid
- all grid variations from
1-1to12-12. In original Simple Grid following combinations were not possible:col-2-7 + col-5-7,col-1-3 + col-2-3etc .col.col-preserveto to keep layout on mobile.grid.grid-padfor grid with padding of 20px
npm install --save simple-grid2
bower install --save simple-grid2
or copy simplegrid.css to your project and simply add:
<link href="simplegrid.css" media="all" rel="stylesheet" />
Make sure if following styles is inside your project. It's usually added with bootstrap, normalize.css or reset.css.
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}Before starting with anything please make sure to include this snippet of code
in your <head> tag so that the grids will be responsive on mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1" ><div class="grid">
<div class="col-3-12">
left, narrow column
</div>
<div class="col-9-12">
right, wide column
</div>
</div><div class="grid">
<div class="col-2-5"></div>
<div class="col-1-5"></div>
<div class="col-2-5"></div>
</div>