simple-grid2
v1.0.1
Published
Simple Grid 2 ============= This project is based on: ThisIsDallas/Simple-Grid
Downloads
2
Readme
Simple Grid 2
This project is based on: ThisIsDallas/Simple-Grid
What is inside
- all grid variations from
1-1
to12-12
. In original Simple Grid following combinations were not possible:col-2-7 + col-5-7
,col-1-3 + col-2-3
etc .col.col-preserve
to to keep layout on mobile.grid.grid-pad
for grid with padding of 20px
Instructions:
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" >
Sample usage:
<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>