<div class="grid">
<div class="grid__cell">A</div>
<div class="grid__cell">B</div>
<div class="grid__cell">C</div>
<div class="grid__cell">D</div>
<div class="grid__cell">E</div>
</div>
$screen-sm-min: 768px;
$screen-sm-max: 991px;
$screen-md-min: 992px;
$pad: 10px;
/* layout styles */
.grid {
display: flex;
flex-wrap: wrap;
flex-direction: row;
padding: $pad / 2;
}
.grid__cell {
$cols: 1;
width: calc(#{100% / $cols} - #{$pad});
max-width: calc(#{100% / $cols} - #{$pad});
margin: $pad / 2;
flex: 1 1 auto;
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.grid__cell {
$cols: 2;
width: calc(#{100% / $cols} - #{$pad});
max-width: calc(#{100% / $cols} - #{$pad});
}
}
@media (min-width: $screen-md-min) {
.grid__cell {
$cols: 3;
width: calc(#{100% / $cols} - #{$pad});
max-width: calc(#{100% / $cols} - #{$pad});
}
}
/* presentational & boilerplate styles */
body, html {
min-height: 100%;
margin: 0;
}
.grid__cell {
background-color: orange;
text-align: center;
color: white;
font-family: arial, sans-serif;
line-height: 60px;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.