*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after { clear: both }
.grid-wrap {
max-width: 1600px;
margin: 20px auto 0;
padding: 0 10px;
}
.grid-item {
float: left;
margin: 0 10px 20px;
background-color: #ccc;
height: 80px;
}
.two-col-grid .grid-item { width: calc((100% - 20px * 2) / 2) }
.three-col-grid .grid-item { width: calc((100% - 20px * 3) / 3) }
.four-col-grid .grid-item { width: calc((100% - 20px * 4) / 4) }
.five-col-grid .grid-item { width: calc((100% - 20px * 5) / 5) }
.six-col-grid .grid-item { width: calc((100% - 20px * 6) / 6) }
.seven-col-grid .grid-item { width: calc((100% - 20px * 7) / 7) }
.eight-col-grid .grid-item { width: calc((100% - 20px * 8) / 8) }
.nine-col-grid .grid-item { width: calc((100% - 20px * 9) / 9) }
.ten-col-grid .grid-item { width: calc((100% - 20px * 10) / 10) }
.eleven-col-grid .grid-item { width: calc((100% - 20px * 11) / 11) }
.twelve-col-grid .grid-item { width: calc((100% - 20px * 12) / 12) }
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.