column() nesting and gutter ratio consistency in Jeet

Does Jeet's column() mixin preserve the intended gutter proportion when nested?

No. Jeet calculates the gutter as a percentage of the current container’s width. When a column() is placed inside another column(), the nested gutter inherits that percentage from the parent column’s reduced width, so the visual gutter becomes narrower (or wider if the parent uses padding) than the root‑level gutter. This compounding occurs because the mixin does not rebasing the gutter to the viewport or root container.

Confirmed facts about the behavior

• Jeet’s column() mixin applies the global gutter percentage to the element’s width.
• The percentage is resolved against the element’s immediate parent, not the root viewport.
• Float‑based clearfix is required for parent containers to avoid collapse in nested layouts.
• The SCSS and Stylus ports differ in variable scoping, which can shift baseline gutter calculations if the gutter variable is redefined locally.

What approach prevents gutter compounding without manual fraction adjustment?

Apply box-sizing: border-box to the nested column elements (or to a wrapper that contains them). This makes the gutter padding count inside the declared fractional width, so the element’s outer dimensions stay consistent with the parent’s fraction regardless of the nested context.

.nested-column {
  @include column(1/3);
  box-sizing: border-box; /* keeps padding inside the width */
}

Is there a recommended method for scoping gutter settings to nested column contexts?

Yes. Reset the gutter context for the nested subtree by either:

1. Wrapping the nested columns in a container that sets the gutter to 0% (or a fixed pixel value) before calling column(), then restoring the global gutter after the wrapper.
2. Using Jeet’s gutter() mixin locally to override the gutter variable for the nested scope:

.nested-wrapper {
  @include gutter(0); /* or a fixed pixel gutter */
}
.nested-wrapper .col {
  @include column(1/4);
}

After the wrapper, the global gutter resumes automatically.

Missing diagnostic detail

To give a final, port‑specific recommendation, confirm whether you are using the SCSS or Stylus implementation of Jeet, as variable handling differs between the two.