Jeet column() mixin overflow when nested with zero gutters

Answer the exact question first

1. Invoking reset‑gutters() correctly
When a parent row has been declared with gutters(0), the gutter context for any nested rows is zero. If you need to nest a row() inside that parent and the inner column() declarations use shift() or the spread option, call reset‑gutters() immediately before the nested row():

@include gutters(0);          // parent row

@include reset-gutters();        // restore Jeet’s default gutter
@include row();                // nested row
  @include column(6, shift(1)); // inner column

After reset‑gutters(), the gutter context reverts to Jeet’s default (usually 30px). The nested row then calculates column widths relative to that default. If you still want the visual appearance of zero gutters inside the nested row, re‑apply gutters(0) right after the row() declaration:

@include row();
  @include gutters(0);        // zero‑gutter inside nested row

Because reset‑gutters() changes the gutter for all subsequent selectors until overridden, it is important to re‑apply gutters(0) only inside the nested block where zero gutters are desired.

Does reset‑gutters() reliably fix overflow in LibSass 3.5.x?

In practice, the sequence reset‑gutters(); row(); gutters(0); column(...) has been observed to eliminate horizontal overflow caused by shift() or spread() when compiling with LibSass 3.5.x. The fix works because the width calculations use the restored gutter baseline, preventing the inner columns from exceeding the parent’s width. However, because Sass engine behavior can vary between releases, it is prudent to verify the compiled CSS in your target environment.

Is a wrapper mixin a consistent workaround?

Creating a small wrapper mixin that automatically performs the reset‑gutters() call followed by row() (and optionally gutters(0)) is a practical way to encapsulate this pattern. It keeps the gutter context local to the nested row and reduces the risk of leaking the default gutter into unrelated sibling blocks. The wrapper can be reused across both Ruby Sass and LibSass implementations, providing a uniform approach.

When using such a wrapper, remember to:

• Apply gutters(0) inside the wrapper if the nested layout must remain zero‑gutter.
• Reset the gutter back to the desired value after the wrapper if subsequent code relies on a different gutter.

Diagnostic question

To determine whether the reset‑gutters() step is necessary for your particular markup, could you confirm whether any of the inner column() declarations use shift() or the spread option?