Nested Jeet grids: span() with inherited context or column() with explicit counts?

Answer: Use column() with explicit counts for more predictable nested layouts

When a child grid sits inside a parent span(), the child inherits the parent’s column context (default 12). This chain can amplify sub‑pixel drift because each level multiplies the same rounding error. Using column() fixes the column count at every nesting level, making the math self‑contained and usually producing the most consistent widths across breakpoints.

Why column() is safer for non‑12 column counts

• Each level’s width is calculated against a known column count, so the ratio stays exact even when the parent redefines its own columns at a breakpoint.
• Inherited span() can produce a child width that is a fraction of a fraction (e.g., 0.5 of 0.5), magnifying rounding errors when the browser truncates or rounds the percentage.
• With explicit counts you can align the child’s columns to a multiple of the parent’s columns (e.g., 10 columns inside a 12‑column parent) to keep the overall ratio clean.

Rounding reality in Jeet

Jeet emits calc()-based gutter math that relies on percentage widths. Browsers round these percentages differently (floor, round, or truncate). Because Jeet offers no rounding‑control API, any percentage‑based layout will inherit the browser’s rounding behavior. The consequence is that small gaps or overlaps can appear at specific viewport widths, especially in deeply nested or responsive scenarios.

Practical mitigation steps

1. Prefer column(ratio, columns, gutter) for child grids that use a column count other than 12.
2. Keep nesting shallow: avoid more than two levels of nested grids unless necessary.
3. Align child column counts with the parent’s context (e.g., use 10 columns inside a 12‑column parent or a ratio that maps cleanly to the parent).
4. Test the layout at all breakpoint widths: inspect computed widths in devtools and log pixel values to catch drift early.
5. Use a visual regression tool or screenshots to flag any visible gaps or overlaps during development.

Diagnostic question to refine the recommendation

What exact column count does the parent grid use at each breakpoint? Knowing the parent’s column count at every responsive breakpoint lets you decide whether a 1:1 inherited span() or an explicit column() call will maintain consistent widths.