Fractional Columns Without the Math: Jeet's column-span Mixin in Practice

Anyone who has hand-rolled a fluid grid knows the drill: you want a sidebar that's one-third of the container, the gutter is 24 pixels, and suddenly you're writing calc() expressions that nobody on the team wants to touch six months later. Jeet's answer is blunt — express the width as a fraction and let the preprocessor do the arithmetic. That's the whole pitch of column-span, and it holds up well for small-to-medium Sass and Stylus projects.

The problem with hand-calculated fluid columns

A fractional-width layout sounds trivial until gutters enter the picture. "One third of the container" is not width: 33.333% once you subtract the space between columns, and the correct value changes depending on whether the element is the first, middle, or last in a row. Developers typically end up with one of two outcomes: a pile of magic percentages with comments like /* don't ask */, or a full framework import just to get a grid.

Jeet sits in between. It's a grid-only library — no buttons, no resets, no opinion about your typography — that generates the width and margin math at compile time.

What column-span actually does

The mixin takes a fraction and computes the width and gutter offsets for you. Because the fraction is explicit, the intent of the layout survives in the source code, which is the real win: column-span(1/3) reads as "one of three columns" in a way that width: 31.58% never will.

Assumptions for the examples below: a Sass pipeline (Dart Sass or node-sass era tooling both historically worked with Jeet's SCSS port), Jeet installed via npm and imported into your stylesheet. Verify the exact mixin name and signature against the README for the version you install — the API has varied across major releases, and some versions expose the primary mixin as column() or col() with column-span as a related helper.

A worked example: sidebar that becomes half-width on tablets

Here's a sidebar that takes one-third of the row on wide screens and half on medium ones:

@import 'jeet';

.sidebar {
  @include column-span(1/3);

  @include breakpoint($medium) {
    @include column-span(1/2);
  }
}

Run this through your Sass compiler (for example, npx sass src/layout.scss dist/layout.css from your project root — no special permissions needed beyond write access to the output directory). Then open the generated CSS and check two things: the width on .sidebar should be a percentage slightly under 33.33% (the difference is the gutter allowance), and there should be a margin declaration handling the gutter. If you see a flat 33.3333% with no margin, the gutter setting isn't being applied — check Jeet's global gutter configuration variable before assuming the mixin is broken.

In the browser, resize the viewport across your $medium breakpoint and confirm the sidebar visibly shifts from a third to a half of its row while the gap between it and the main content stays constant. That constant gap is the entire point of the exercise.

The global gutter is a footgun

Jeet's gutter is typically configured as a global setting. That's convenient right up until one component needs tighter spacing: change the global value and every column-span call in the project shifts. The practical mitigations are to pass a gutter argument per-call where the API supports it, or to wrap the mixin in your own project-level mixin with the gutter pinned:

@mixin tight-column($fraction) {
  @include column-span($fraction, $gutter: 2);
}

Treat the exact parameter name as something to confirm in the docs for your installed version rather than gospel — this is the kind of detail that drifts between releases.

Trade-offs worth knowing before you commit

• Preprocessor required. If your project is vanilla CSS, Jeet is a non-starter without adding a Sass or Stylus build step. Modern CSS (grid-template-columns: 1fr 2fr plus gap) now covers much of this ground natively, and for new projects that's often the better default.
• Opinionated semantics. Jeet's float-based output can fight with other frameworks' grid classes if you mix them. Pick one layout system per component tree.
• Maintenance status. Jeet's development pace has slowed considerably in recent years. It works fine for what it does, but verify the version you install compiles cleanly with your current Sass version — newer Dart Sass releases have dropped support for some older syntax patterns.

Where to start

If you inherit a codebase already using Jeet, column-span is the cleanest way to extend its layouts — grep for existing usage, match the established gutter convention, and compile a single test file before touching production styles. If you're starting fresh, prototype the same layout in CSS Grid first; reach for Jeet only if the surrounding stack already assumes a preprocessor grid. Either way, the compiled CSS is the source of truth: inspect it, resize the browser, and trust what you measure over what the mixin promises.