Using Jeet’s column mixin to build responsive layouts with custom gutters and breakpoints

Quick answer

To get a responsive column that spans six of twelve columns with a 1 rem horizontal gutter, define the Jeet variables and call the column mixin:

$jeet-columns: 12;
$jeet-gutters: (1rem 0.5rem); // horizontal, vertical
@include column(6);

This produces width: 50%; and margin-left: 0.5rem; margin-right: 0.5rem; (half the gutter split on each side).

How the mixin works

Jeet’s @mixin column($span, $collapse: false, $gutters: $jeet-gutters) calculates the width as a fraction of the 12‑column grid, then adds left and right margins based on the gutter map. When a breakpoint is supplied, the rules are wrapped in a media query that activates at that width and up.

Worked configuration

1. Create a file styles.scss in your project.
2. Import Jeet (assuming it is installed via npm or a local copy).
3. Set the grid variables.
4. Apply the mixin to the element you want.
5. Compile the Sass to CSS.

// styles.scss
@import "jeet"; // path to Jeet’s main file

$jeet-columns: 12;
$jeet-gutters: (1rem 0.5rem); // horizontal gutter 1rem, vertical 0.5rem
$jeet-breakpoints: (
  tablet: 600px,
  desktop: 900px
);

.container {
  @include row; // clears floats and resets gutters
}

.main {
  // six columns at base, four columns on tablet and up, three on desktop and up
  @include column(6);
  @include column(4 of $jeet-breakpoints['tablet']);
  @include column(3 of $jeet-breakpoints['desktop']);
}

Run the compiler from the project root:

# Ensure Dart Sass is installed (npm i -g sass or use local npx)
sass styles.scss:dist/css.css --no-source-map

You need write permission for the dist/ directory. The command reads styles.scss and writes dist/css.css.

What to check

• Open dist/css.css and verify rules for .main contain:

.main {
  width: 50%;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
@media (min-width: 600px) {
  .main { width: 33.33333%; margin-left: 0.5rem; margin-right: 0.5rem; }
}
@media (min-width: 900px) {
  .main { width: 25%; margin-left: 0.5rem; margin-right: 0.5rem; }
}

In the browser, inspect an element with class main and confirm the computed width changes as you resize past 600 px and 900 px, and that the left/right margins stay constant.

Limits and common mistakes

Sass dependency

Jeet is a Sass library; if your project uses plain CSS or another preprocessor (Less, Stylus) the mixins will not compile unless you add Sass to the build pipeline.

Gutter values

Setting $jeet-gutters to zero or a negative number removes the spacing or causes overlapping content. Verify that both gutter values are positive lengths.

Nesting without resetting context

Placing @include column inside another column’s rules without calling @include row (or resetting gutters) leads to cumulative width errors because margins stack. Always wrap a set of columns in a container that uses @include row.

Incorrect breakpoint map keys

The breakpoint prefix expects a key that exists in $jeet-breakpoints. Misspelling the key results in the mixin being ignored, producing only the base span. Double‑check the map keys.

Using shift with negative gutters

The @include shift move relies on the gutter values; if gutters are altered after a shift call, the offset may be wrong. Keep gutter definitions stable throughout the file.

Practical verification

After compiling, resize the viewport and watch the element’s width in the DevTools Computed pane. If the width stays at the base value across all sizes, the breakpoint map or media query syntax is likely wrong. If the element overlaps its neighbours, inspect the gutter values and ensure the container uses @include row.