.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-1 1
.column-sm-2 2
.column-sm-2 2
.column-sm-2 2
.column-sm-2 2
.column-sm-2 2
.column-sm-2 2
.column-sm-3 3
.column-sm-3 3
.column-sm-3 3
.column-sm-3 3
.column-sm-4 4
.column-sm-4 4
.column-sm-4 4
.column-sm-5 5
.column-sm-5 5
.column-sm-2 2
.column-sm-6 6
.column-sm-6 6
.column-sm-7 7
.column-sm-5 5
.column-sm-8 8
.column-sm-4 4
.column-sm-9 9
.column-sm-3 3
.column-sm-10 10
.column-sm-2 2
.column-sm-11 11
.column-sm-1 1
.column-sm-12 12
View Compiled
@mixin grid( $columns, $breakpoint ) {
@for $i from 1 through $columns {
.column-#{$breakpoint}-#{$i} {
width: #{ ( 100 / $columns ) * ($i ) + '%'};
}
}
}
[class^='column-'] {
background-color: #f2f2f2;
border: 1px solid #ddd;
text-align: center;
width: 100%;
float: left;
}
// Creates the grid for extra small devices
@include grid(12, xs);
// Creates the grid for small devices
@media (min-width: 768px) {
@include grid(12, sm);
}
// Creates the grid for medium devices
@media (min-width: 992px) {
@include grid(12, md);
}
// Creates the grid for large devices
@media (min-width: 1200px) {
@include grid(12, lg);
}
*, :after, :before {
box-sizing: border-box;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.