/* Simple Grid Learn More - http://dallasbass.com/simple-grid-a-lightweight-responsive-css-grid/ Project Page - http://thisisdallas.github.com/Simple-Grid/ Author - Dallas Bass Site - dallasbass.com */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { margin: 0px; } [class*='col-'] { float: left; padding-left: 17px; padding-right: 17px; } [class*='col-']:last-of-type { padding-right: 0px; } [class*='col-']:first-of-type { padding-left: 0px; } .grid { width: 100%; max-width: 1155px; min-width: 755px; margin: 0 auto; overflow: hidden; padding: 0px 75px 0 75px; } .grid:after { content: ""; display: table; clear: both; } /* Content Columns */ .col-1-1 { width: 100%; } .col-2-3, .col-8-12 { width: 66.66%; } .col-1-2, .col-6-12 { width: 50%; } .col-1-3, .col-4-12 { width: 33.33%; } .col-1-4, .col-3-12 { width: 25%; } .col-3-4, .col-4-12 { width: 75%; } .col-1-5 { width: 20%; } .col-1-6, .col-2-12 { width: 16.667%; } .col-1-7 { width: 14.28%; } .col-1-8 { width: 12.5%; } .col-1-9 { width: 11.1%; } .col-1-10 { width: 10%; } .col-1-11 { width: 9.09%; } .col-1-12 { width: 8.33% } /* Layout Columns */ .col-11-12 { width: 91.66% } .col-10-12 { width: 83.333%; } .col-9-12 { width: 75%; } .col-5-12 { width: 41.66%; } .col-7-12 { width: 58.33% } @media handheld, only screen and (max-width: 767px) { .grid { width: 100%; min-width: 0; margin-left: 0px; margin-right: 0px; padding-left: 15px !important; padding-right: 15px !important; } [class*='col-'] { width: auto; float: none; margin-left: 0px; margin-right: 0px; margin-top: 10px; margin-bottom: 10px; padding-left: 0px !important; padding-right: 0px !important; } } .row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } .column { display: flex; flex-direction: column; flex-basis: 100%; flex: 1 } .double-column { display: flex; flex-direction: column; flex-basis: 100%; flex: 2 }