Responsive Grid based on Skeleton and 960.gs Custom Grid Generator
/*
CSS Grid
Based from the Skeleton CSS framework (http://getskeleton.com/) and 960.gs Custom Grid Generator (http://grids.heroku.com/)
Date = June 2014
By = Ricardo Zea
*/
//Nested Column Classes
.column, .columns { float:left; display:inline; margin:0 1%; position:relative; }
.column.alpha, .columns.alpha { margin-left:0; }
.column.omega, .columns.omega { margin-right:0; }
//12 Column Base Grid
.one.column { width:6.3330%; }
.two.columns { width:14.667%; }
.three.columns { width:23.000%; }
.four.columns { width:31.333%; }
.five.columns { width:39.667%; }
.six.columns { width:48.000%; }
.seven.columns { width:56.333%; }
.eight.columns { width:64.667%; }
.nine.columns { width:73.000%; }
.ten.columns { width:81.333%; }
.eleven.columns { width:89.667%; }
.twelve.columns { width:98.000%; }
@media only screen and (max-width:640px) {
.one.column,
.two.columns,
.three.columns,
.four.columns,
.five.columns,
.six.columns,
.seven.columns,
.eight.columns,
.nine.columns,
.ten.columns,
.eleven.columns,
.twelve.columns { width:100%; }
}
//Clearfix - http://davidwalsh.name/css-clear-fix
.clearfix:before,
.clearfix:after,
.row:before,
.row:after { content:''; display:table; }
.row:after,
.clearfix:after { clear:both; }
.row,
.clearfix { clear:both; zoom:1; }
This my personal custom CSS grid.