Create a gist now

Instantly share code, notes, and snippets.

Simple 6 column grid
/* Reset */
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box; /* http://caniuse.com/#search=border-box, known compatibilty to IE8 without issues in this usage */
}
/*
* Grid
* 6 columns but could be adapted to 12
*/
.grid-wrap {
margin: 0px auto;
max-width: 1200px;
padding: 10px;
width: 100%;
}
img {
max-width: 100%;
}
/* Clearing for new rows */
.row:before, .row:after {
content:"";
display: table ;
clear:both;
}
[class*='column-'] {
float: left;
min-height: 1px;
width: 16.66%;
}
.column-1 {
width: 16.66%;
}
.column-2 {
width: 33.33%;
}
.column-3 {
width: 50%;
}
.column-4 {
width: 66.66%;
}
.column-5 {
width: 83.33%;
}
.column-6 {
width: 100%;
}
.padded-column {
padding: 0px 10px;
}
/*
* Media Queries
*/
/* Tablet Breakpoint */
@media (max-width: 800px) {
[class*='column-'] {
width: 100%; /* 100% width for sections, change for your spec */
}
}
/* Mobile Breakpoint */
@media (max-width: 480px) {
[class*='column-'] {
width: 100%; /* 100% width for sections, change for your spec */
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment