html {
font-size: 16px;
font-family: Georgia;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
font-size: 16px;
font-family: Georgia;
}
.container {
width: 100%;
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
.row {
box-sizing: border-box;
}
.row:before,
.row:after {
content:"";
display: table ;
clear:both;
}
[class*='col-'] {
float: left;
min-height: 1px;
width: 8.333333333333333%;
padding: 1em; /*-- gutter --*/
}
.col-1 {
width: 8.333333333333333%;
}
.col-2 {
width: 16.66666666666667%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33333333333333%;
}
.col-5 {
width: 41.66666666666667%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33333333333333%;
}
.col-8 {
width: 66.66666666666667%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33333333333333%;
}
.col-11 {
width: 91.66666666666667%;
}
.col-12 {
width: 100%;
}
Here a simple and lightweight CSS Grid System
1 Response
Write a 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.