'no-gutters' implementation in Sass for grids
Created by: ihorzenich
We can use <div class="row no-gutters">
in html, but in case of implementing this in Sass we need to manually add zero-margin/padding:
For example:
// Grid with 'no-gutters' NOW
.example-row {
@include make-row(); // or just @extend .row;
margin-left: 0;
margin-right: 0;
}
.example-col-2 {
@include make-col-ready(); // or just @extend .col-2;
@include make-col(2);
padding-left: 0;
padding-right: 0;
}
.example-col-10 {
@include make-col-ready();
@include make-col(10);
padding-left: 0;
padding-right: 0;
}
Maybe it will be usefull to add an option for Sass mixins like:
@mixin make-row($gutters: 'gutters') {
display: flex;
flex-wrap: wrap;
@if $gutters == 'gutters' {
margin-right: ($grid-gutter-width / -2);
margin-left: ($grid-gutter-width / -2);
}
}
@mixin make-col-ready($gutters: 'gutters') {
position: relative;
// Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we use `flex` values
// later on to override this initial width.
width: 100%;
min-height: 1px; // Prevent collapsing
@if $gutters == 'gutters' {
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
}
}
So we could write:
// Grid with 'no-gutters' AFTER
.example-row {
@include make-row('no-gutters');
}
.example-col-2 {
@include make-col-ready('no-gutters');
@include make-col(2);
}
.example-col-10 {
@include make-col-ready('no-gutters');
@include make-col(10);
}