While having a hard time making automatic rows with Bourbon Neat I stumbled upon this awesome little mixin, thankfully shared by Josh Fry.
It allows you to reset the nth-child margins and clearings, most helpful when you want to create different sized automatic rows at various breakpoints.
I just keep it here for my own future reference:
1.) Set the flexgrid column and gutter in your grid settings:
$fg-column: $column;
$fg-gutter: $gutter;
2.) Save the omega-reset mixin:
@mixin omega-reset($nth) {
&:nth-child(#{$nth}) { margin-right: flex-gutter(); }
&:nth-child(#{$nth}+1) { clear: none }
}
3.) Use it:
.drupal-features {
li {
@include media($desktop) {
@include span-columns(4);
@include omega(3n);
}
@include media($medium) {
// reset the previoulsy set omega(3n) so it won't conflict
// with the omega(2n) used at this breakpoint
@include omega-reset(3n);
@include span-columns(6);
@include omega(2n);
}
}
}