Using Jeet’s column-span mixin for responsive column widths

Useful answer

Jeet’s column-span mixin lets you size an element as a fraction of its parent grid while automatically subtracting the configured gutter, giving a fluid, column‑based width without manual math.

How column-span works

When Jeet is imported, it reads a Sass map $jeet that defines the gutter width (default 0.5rem). The mixin column-span($fraction) computes a width of calc( fraction * 100% - $gutter ) where the fraction is expressed as a ratio like 1/3 or 2/5. The result is a calc() expression that the browser resolves at render time, so the element’s width scales with its container and respects the gutter space between columns.

Worked example: basic container and breakpoint

/* 1. Define the Jeet map before importing */
$jeet: (gutter: 1rem);

/ 2. Import Jeet (assumes the jeet.scss file is in the load path) */
@import 'jeet';

/ 3. Create a grid container */
.container {
  @include jeet-container; /* adds display: flex; flex-wrap: wrap; margin: -$gutter/2 */
}

/ 4. Sidebar that takes one‑third of the grid at the base size */
.sidebar {
  @include jeet-column; /* optional: adds box‑sizing and padding for the gutter */
  @include column-span(1/3);

  /* 5. At the "sm" breakpoint, make it span half the grid */
  @include jeet-breakpoint(sm) {
    @include column-span(1/2);
  }
}

The generated CSS (simplified) looks like:

.container {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5rem; /* half of the 1rem gutter */
}
.sidebar {
  box-sizing: border-box;
  padding: 0.5rem; /* half gutter */
  width: calc(33.3333% - 1rem); /* 1/3 of 100% minus full gutter */
}
@media (min-width: 40em) {
  /* assuming jeet-breakpoint(sm) maps to 40em */
  .sidebar {
    width: calc(50% - 1rem);
  }
}

Notice how the calc() subtracts the full gutter (1rem) because the container applies a negative margin and each column adds padding equal to half the gutter.

Limits and common mistakes

• Must be inside a jeet‑container: column-span relies on the negative margin set by @include jeet-container. Using it on a plain block element will produce a width that is too narrow because the gutter subtraction is not compensated.
• Fraction must be ≤ 1: Values like 4/3 produce calc(133.33% - 1rem) which overflows the parent and breaks the grid.
• Set the Jeet map before import: If you omit $jeet: (gutter: 1.5rem); before @import 'jeet';, Jeet falls back to its default gutter (0.5rem in Jeet 7). The resulting widths will not match your design system, causing unexpected gaps or overlaps.
• Display context: The mixin assumes a block‑level element that participates in the flex layout. Applying it to an display: inline element or a flex item without an explicit width context can lead to incorrect calc() values because the element’s base width is not derived from the container.
• Older Jeet versions: Jeet 6 and earlier lack the jeet-breakpoint helper. In those versions you must write manual media queries, e.g., @media (min-width: 40em) { @include column-span(1/2); }.

Practical verification steps

1. Create a file test.scss with the example above.
2. Compile it with a Sass compiler (Dart Sass ≥ 1.20):
   sass test.scss test.css
3. Open the generated test.css and verify that the .sidebar rule contains width: calc(33.3333% - 1rem); (or the equivalent fraction you used).
4. Load the HTML that includes test.css in a browser, open DevTools, inspect the .sidebar element, and check the Computed width changes as you resize the viewport across the breakpoint you defined.
5. If the width does not match the expected calc() expression, double‑check that the $jeet map was defined before the import and that the element is a descendant of an element with @include jeet-container.