Basic CSS Grid System

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

Grazie Giuseppe

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.