Diagnosing Jeet Grid Failures: Collapse, Overflow, Gutters and Breakpoints

The problem you see in the browser

Jeet 7.x layouts break in four recognizable ways: columns collapse to zero width or stack unexpectedly, fraction columns overflow the viewport, gutters double or vanish at breakpoints, and media queries never fire. The useful takeaway is that Jeet's mixins are percentage-based and context-sensitive. col() computes width relative to its immediate parent, gutters are applied via negative margins on the row and padding on columns, and breakpoints are read from a Sass map at import time. Most failures are configuration order or nesting errors, not browser bugs.

Recognizable conditions and likely causes

Symptom	Likely cause	First check
Zero-width columns or unexpected stacking	Missing center() wrapper or parent without explicit max-width. col() relies on a constrained parent.	Inspect computed width of the parent element.
Fraction widths wider than viewport, e.g. col(1/3) overflows	col() nested inside another col() without span(). Inner fractions compound against an already fractional parent.	Audit nesting depth of col() calls.
Gutters double or disappear at breakpoints	Multiple gutter() calls at different nesting levels or $jeet-gutter overridden after partial import. Jeet applies gutters once per row.	Search project for @include gutter occurrences.
Breakpoint media queries do not fire	media() uses a name not in $jeet-breakpoints, or the map is defined after @import 'jeet'. Map order matters in Sass.	Verify $jeet-breakpoints is defined before importing Jeet.

Ordered diagnostic checks

1. Verify a center container exists. In your main SCSS entry, confirm the page wrapper uses @include center(1200px) or similar. Without a max-width parent, percentage columns have no basis.

2. Check for illegal col() nesting. Search for selectors where a rule with @include col() contains a child also using @include col(). Jeet expects span() or shift() for children inside a column.

3. Consolidate gutter usage. Run a project-wide search for gutter. There should be one @include gutter(20px) on the immediate row selector, not on nested columns. Duplicate calls add padding cumulatively.

4. Validate breakpoint map order. Open the SCSS file that imports Jeet. The $jeet-breakpoints map must be defined before @import 'jeet'. If it appears after, Jeet uses defaults and custom names are ignored.

5. Confirm Sass toolchain. In a terminal where Dart Sass is installed, run sass --version. Jeet 7.x requires Dart Sass ≥1.32. Node-sass is deprecated and can produce different output. Required permission is read access to the project and execute permission for the sass binary.

Fixes tied to findings

Collapsed columns

Add a constrained wrapper. Example SCSS structure:

// Define before import
$jeet-breakpoints: (mobile 480px, tablet 768px, desktop 1024px);
@import 'jeet';

.page {
  @include center(1200px);
}

Check the result by compiling and inspecting the generated CSS for a max-width rule on .page and percentage widths on its children.

Nested fraction overflow

Replace inner col() with span() that references the parent context. Parent uses col(1/2), child should use @include span(1/3 of 2) rather than @include col(1/3). The of syntax tells Jeet to calculate against the full grid, not the fractional parent.

Gutter inconsistency

Move all gutter declarations to the row level. A single @include gutter(20px) on the row yields negative margins on the row and equal padding on columns. Remove any additional gutter() includes inside nested columns.

Breakpoint not firing

Define the map before import, as shown above. Then use @include media(tablet) with a name present in the map. Recompile and inspect the compiled CSS for @media blocks with the expected min-width values.

Escalation criteria

If layout remains broken after the checks above, investigate external interference. Check for CSS framework resets, non-standard box-sizing, or conflicting grid systems such as Bootstrap. Jeet is unmaintained since 2018 and has no security updates or browser compatibility fixes. Consider migration to CSS Grid for long-term maintenance.

When filing an issue, provide a minimal reproduction with the SCSS import order, the $jeet-breakpoints map, and the HTML structure showing center(), row, and column usage. Do not include full project code.

Limitations and verification

Jeet 7.x only supports Sass and Stylus, no PostCSS or Less port. Fraction math uses calc() internally; older browsers may require polyfills. Global variables $jeet-gutter and $jeet-breakpoints are mutable and can be silently overridden by later partials.

A practical verification workflow is to create a minimal SCSS file that defines breakpoints, imports Jeet, applies center(), col(1/3) and a single gutter(20px), compile with Dart Sass 1.70+, and inspect the output for percentage widths, negative margins on the row, and media queries. For nesting, compare a parent col(1/2) with a child span(1/3 of 2) against a child col(1/3) to see the compounding effect in the compiled percentages.