/* Grid
*/¶ ↑
$column-padding: 1rem; $margin-bottom: 1rem; // The rows have a negative margin which are offset by the padding on the columns.
%column-padding {
padding-left: $column-padding; padding-right: $column-padding;
}
%row-margin {
margin-left: -$column-padding; margin-right: -$column-padding;
}
// Flex row .flex-row {
@extend %row-margin; display: flex; flex-direction: row; flex-wrap: wrap;
}
.flex-small, .flex-large {
@extend %column-padding; flex-basis: 100%; margin-bottom: $margin-bottom;
}
/* Small screen breakpoint */
@include small-breakpoint {
.flex-small { flex: 1 1 0; margin-bottom: 0; }
}
/* Large screen breakpoint */
@include large-breakpoint {
.flex-large { flex: 1 1 0; margin-bottom: 0; }
}