<div class="container">
<div class="row">
<div class="col small-12">
<div class="grid-bg center">
<strong>The Header</strong> (span the entire 12 columns on all screen size)
</div>
</div>
<div class="col small-12 med-8">
<div class="grid-bg"><strong>Content</strong> (span the entire 12 columns on small screen devices only and 8 columns for medium to large screen)<br /><br />
Pellentesque habitant morbi tristique senectus et netus et.
</div>
</div>
<div class="col small-12 med-4">
<div class="grid-bg"><strong>Sidebar</strong> (span the entire 12 columns on small screen devices only and 4 columns for medium to large screen)</div>
</div>
<div class="col small-12">
<div class="grid-bg center"><strong>The Footer</strong></div>
</div>
</div>
</div>
$num-cols: 12;
$spacing-width: 8px;
// mixins for generating percentage based columns
@mixin columns-generator($class-name) {
$i: 1;
@while $i <= $num-cols {
$perc: unquote((100 / ($num-cols / $i)) + "%");
.#{$class-name}#{$i} {
width: $perc;
}
$i: $i + 1;
}
}
// mixin for generating grid column
@mixin grid-columns-generator($class-name) {
$i: 1;
@while $i <= $num-cols {
.#{$class-name}#{$i} {
grid-column: span $i;
}
$i: $i + 1;
}
}
body {
background: #eee;
}
.container {
max-width: 1280px;
margin: 20px auto;
padding: 0 8px;
}
.row {
margin-left: -($spacing-width);
margin-right: -($spacing-width);
&:after {
content: "";
display: table;
clear: both;
}
.col {
box-sizing: border-box;
float: left;
padding: 0 $spacing-width;
}
}
@include columns-generator("small-");
@media (min-width: 53em) {
@include columns-generator("med-");
}
@media (min-width: 75em) {
@include columns-generator("large-");
}
.center {
text-align: center;
}
strong {
font-weight: 600;
}
.grid-bg {
background-color: #D24663;
color: #FFFFFF;
padding: 16px;
margin: 0 0 1rem 0;
font-weight: 200;
font-size: 24px;
line-height: 1.5;
}
// For browsers that supports grid, reset all the values above
@supports(display: grid) {
.row {
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: $spacing-width * 2;
&:after {
content: none;
}
}
.grid-bg {
margin: auto;
}
.row > * {
width: auto;
}
.row .col {
width: auto;
padding: 0;
}
@include grid-columns-generator("small-");
@media (min-width: 53em) {
@include grid-columns-generator("med-");
}
@media (min-width: 75em) {
@include grid-columns-generator("large-");
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.