* { box-sizing: border-box; margin: 0; padding: 0; } .grid.common { display: block; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 999; display: none; pointer-events: none; } .section { height: 100%; } .section .col, .section .col .inside { height: 100%; } .section { clear: both; padding: 0; margin: auto; width: 100%; } .grid.common .section { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; } .col { display: block; float:left; text-align: left; } .grid .col { background: gray; } .group:before, .group:after { content:""; display:table; } .group:after { clear:both;} .group { zoom:1; } .inside { text-align: left; padding: 8px; } .grid .inside { background: green; text-align: center; padding: 8px; } @media only screen and (min-width: 1200px) { .section { max-width: 1152px; } .col { padding: 6px 12px; } .col-1-xl {width: 8.33333333%;} .col-2-xl {width: 16.66666667%;} .col-3-xl {width: 25%;} .col-4-xl {width: 33.33333333%;} .col-5-xl {width: 41.66666667%;} .col-6-xl {width: 50%;} .col-7-xl {width: 58.33333333%;} .col-8-xl {width: 66.66666667%;} .col-9-xl {width: 75%;} .col-10-xl {width: 83.33333333%;} .col-11-xl {width: 91.66666667%;} .col-12-xl {width: 100%;} } @media only screen and (max-width: 1199px) { .section { max-width: 960px; } .col { padding: 6px 12px; } .col-1-lg {width: 8.33333333%;} .col-2-lg {width: 16.66666667%;} .col-3-lg {width: 25%;} .col-4-lg {width: 33.33333333%;} .col-5-lg {width: 41.66666667%;} .col-6-lg {width: 50%;} .col-7-lg {width: 58.33333333%;} .col-8-lg {width: 66.66666667%;} .col-9-lg {width: 75%;} .col-10-lg {width: 83.33333333%;} .col-11-lg {width: 91.66666667%;} .col-12-lg {width: 100%;} .grid .inside { background: rgb(0,0,255); } }