Skip to content

Instantly share code, notes, and snippets.

@funnylookinhat
Created July 8, 2014 15:36
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 funnylookinhat/96665b62ee735db28b89 to your computer and use it in GitHub Desktop.
Save funnylookinhat/96665b62ee735db28b89 to your computer and use it in GitHub Desktop.
Because sometimes you just need a quick grid that isn't responsive...
.grid-row {
display: block;
box-sizing: border-box;
}
.grid-row, .grid-row:before, .grid-row:after, .grid-row *, .grid-row *:before, .grid-row *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.grid-row:after {
content:'';
display:block;
clear: both;
}
.grid-row > .grid-column-1,
.grid-row > .grid-column-2,
.grid-row > .grid-column-3,
.grid-row > .grid-column-4,
.grid-row > .grid-column-5,
.grid-row > .grid-column-6,
.grid-row > .grid-column-7,
.grid-row > .grid-column-8,
.grid-row > .grid-column-9,
.grid-row > .grid-column-10,
.grid-row > .grid-column-11,
.grid-row > .grid-column-12 {
float: left;
padding: 5px 10px;
margin: 0;
outline: 0;
}
.grid-row > .grid-column-1 { width: 8.32%; }
.grid-row > .grid-column-2 { width: 16.66%; }
.grid-row > .grid-column-3 { width: 24.99%; }
.grid-row > .grid-column-4 { width: 33.32%; }
.grid-row > .grid-column-5 { width: 41.66%; }
.grid-row > .grid-column-6 { width: 49.99%; }
.grid-row > .grid-column-7 { width: 58.32%; }
.grid-row > .grid-column-8 { width: 66.66%; }
.grid-row > .grid-column-9 { width: 74.99%; }
.grid-row > .grid-column-10 { width: 83.32%; }
.grid-row > .grid-column-11 { width: 91.66%; }
.grid-row > .grid-column-12 { width: 99.99%; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment