Skip to content

Instantly share code, notes, and snippets.

@jongrover

jongrover/index.html

Last active August 29, 2015 14:10
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jongrover/518cf2bd5ec071a4dc5c to your computer and use it in GitHub Desktop.
Save jongrover/518cf2bd5ec071a4dc5c to your computer and use it in GitHub Desktop.
Download ZIP
CSS - Micro Grid System ( fluid with 2% margins)
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Micro Grid Example</title>
<link rel="stylesheet" href="micro-grid-fluid-2p-margins.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-1"> 1 </div>
<div class="col-1"> 1 </div>
<div class="col-1"> 1 </div>
<div class="col-1"> 1 </div>
<div class="col-1"> 1 </div>
<div class="col-1"> 1 </div>
<div class="col-1"> 1 </div>
<div class="col-1"> 1 </div>
<div class="col-1"> 1 </div>
<div class="col-1"> 1 </div>
<div class="col-1"> 1 </div>
<div class="col-1"> 1 </div>
</div>
<div class="row">
<div class="col-2"> 2 </div>
<div class="col-2"> 2 </div>
<div class="col-2"> 2 </div>
<div class="col-2"> 2 </div>
<div class="col-2"> 2 </div>
<div class="col-2"> 2 </div>
</div>
<div class="row">
<div class="col-3"> 3 </div>
<div class="col-3"> 3 </div>
<div class="col-3"> 3 </div>
<div class="col-3"> 3 </div>
</div>
<div class="row">
<div class="col-4"> 4 </div>
<div class="col-4"> 4 </div>
<div class="col-4"> 4 </div>
</div>
<div class="row">
<div class="col-5"> 5 </div>
<div class="col-5"> 5 </div>
<div class="col-2"> 2 </div>
</div>
<div class="row">
<div class="col-6"> 6 </div>
<div class="col-6"> 6 </div>
</div>
<div class="row">
<div class="col-7"> 7 </div>
<div class="col-5"> 5 </div>
</div>
<div class="row">
<div class="col-8"> 8 </div>
<div class="col-4"> 4 </div>
</div>
<div class="row">
<div class="col-9"> 9 </div>
<div class="col-3"> 3 </div>
</div>
<div class="row">
<div class="col-10"> 10 </div>
<div class="col-2"> 2 </div>
</div>
<div class="row">
<div class="col-11"> 11 </div>
<div class="col-1"> 1 </div>
</div>
<div class="row">
<div class="col-12"> 12 </div>
</div>
</div><!-- .container -->
</body>
</html>
Raw
micro-grid-fluid-2p-margins.css
/* MICRO GRID - Fluid with 2% margins
created by Jonathan Grover on 12/2/2014
Generated by Customizable LESS at repo: https://github.com/jongrover/micro-grid
Usable under MIT License */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 90%;
margin: 0 auto;
}
.row {
clear: both;
margin-bottom: 2%;
}
.row:after {
content: "";
display: block;
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
[class*="col-"] {
float: left;
margin-left: 2%;
}
[class*="col-"]:first-child {
margin-left: 0;
}
.col-1 { width: 6.5%; }
.col-2 { width: 15%; }
.col-3 { width: 23.5%; }
.col-4 { width: 32%; }
.col-5 { width: 40.5%; }
.col-6 { width: 49%; }
.col-7 { width: 57.5%; }
.col-8 { width: 66%; }
.col-9 { width: 74.5%; }
.col-10 { width: 83%; }
.col-11 { width: 91.5%; }
.col-12 { width: 100%; }
Raw
micro-grid-fluid-2p-margins.min.css
/* MICRO GRID - Fluid with 2% margins| created by Jonathan Grover on 12/2/2014 | Generated by Customizable LESS at repo: https://github.com/jongrover/micro-grid | Usable under MIT License */
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.container{width:90%;margin:0 auto}.row{clear:both;margin-bottom:2%}.row:after{content:"";display:block;clear:both;height:0;line-height:0;visibility:hidden}[class*=col-]{float:left;margin-left:2%}[class*=col-]:first-child{margin-left:0}.col-1{width:6.5%}.col-2{width:15%}.col-3{width:23.5%}.col-4{width:32%}.col-5{width:40.5%}.col-6{width:49%}.col-7{width:57.5%}.col-8{width:66%}.col-9{width:74.5%}.col-10{width:83%}.col-11{width:91.5%}.col-12{width:100%}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment