Skip to content

Instantly share code, notes, and snippets.

@vsajip
Forked from Shelob9/responsive.css
Created April 9, 2016 08:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vsajip/78622aeec87320cd138a654c7fc230a7 to your computer and use it in GitHub Desktop.
Save vsajip/78622aeec87320cd138a654c7fc230a7 to your computer and use it in GitHub Desktop.
Stupid simple grid, simplified from http://css-tricks.com/dont-overthink-it-grids/
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.grid {
width: 99%;
margin-left: auto;
margin-right: auto;
}
.grid:after {
/* Or @extend clearfix */
content: "";
display: table;
clear: both;
}
[class*='col-'] {
float: left;
padding-right: 20px;
}
.grid [class*='col-']:last-of-type {
padding-right: 0;
}
.col-2third {
width: 66.66%;
}
.col-third {
width: 33.33%;
}
.col-half {
width: 50%;
}
.col-quarter {
width: 25%;
}
.col-eighth {
width: 12.5%;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.grid {
width: 99%;
margin-left: auto;
margin-right: auto;
}
.grid:after {
/* Or @extend clearfix */
content: "";
display: table;
clear: both;
}
[class*='col-'] {
float: left;
padding-right: 20px;
}
.grid [class*='col-']:last-of-type {
padding-right: 0;
}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.grid{width:99%;margin-left:auto;margin-right:auto}.grid:after{content:"";display:table;clear:both}[class*='col-']{float:left;padding-right:20px}.grid [class*='col-']:last-of-type{padding-right:0}.col-2third{width:66.66%}.col-third{width:33.33%}.col-half{width:50%}.col-quarter{width:25%}.col-eighth{width:12.5%}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.grid{width:99%;margin-left:auto;margin-right:auto}.grid:after{content:"";display:table;clear:both}[class*='col-']{float:left;padding-right:20px}.grid [class*='col-']:last-of-type{padding-right:0}
@import "compass";
* {
@include box-sizing(border-box);
}
$pad: 20px;
.grid {
width: 99%;
margin-left: auto;
margin-right: auto;
&:after {
/* Or @extend clearfix */
content: "";
display: table;
clear: both;
}
}
[class*='col-'] {
float: left;
padding-right: $pad;
.grid &:last-of-type {
padding-right: 0;
}
}
.col-2third {
width: 66.66%;
}
.col-third {
width: 33.33%;
}
.col-half {
width: 50%;
}
.col-quarter {
width: 25%;
}
.col-eighth {
width: 12.5%;
}* {
@include box-sizing(border-box);
}
.grid {
width: 99%;
margin-left: auto;
margin-right: auto;
&:after {
/* Or @extend clearfix */
content: "";
display: table;
clear: both;
}
}
[class*='col-'] {
float: left;
padding-right: $pad;
.grid &:last-of-type {
padding-right: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment