Mastering Jeet’s column() Mixin for Fluid, Gutter‑Aware Layouts

The Problem: Manual Width Calculations

When building a fluid grid, developers often calculate column widths by hand:

.col-1-3 { width: 33.3333%; }
.col-1-4 { width: 25%; }

Adding gutters and nesting columns only multiplies the effort. Jeet’s column() mixin turns this tedious math into a single call.

Using column() in a Real Project

Jeet is a Sass‑based grid system. To use it, import the library before any custom styles:

/* test.scss */
@import 'jeet';

/* 1‑of‑3 column */
.col-1-3 {
  @include column(1, 3);
}

/* 2‑of‑5 column */
.col-2-5 {
  @include column(2, 5);
}

Compile with:

sass test.scss test.css

Check the resulting CSS:

.col-1-3 { width: 33.33333%; }
.col-2-5 { width: 40%; }

Jeet automatically handles the percentage math, so you only need to specify the fraction.

Handling Gutters and Nested Grids

Define a gutter once:

$gutter: 1rem; /* 16px */

Now column() adds half‑gutter margins to each side, keeping columns evenly spaced:

.col-1-4 {
  @include column(1, 4);
}

Resulting CSS will contain margin-left and margin-right (or padding if you set $gutter to use padding). This eliminates the need to manually calculate spacing.

Nested grids respect the current context. Suppose you have a two‑column layout, and inside the first column you want a two‑column sub‑grid:

.outer {
  @include column(1, 2);
  .inner {
    @include column(1, 2, $context: 2);
  }
}

Here $context: 2 tells Jeet that the inner columns are part of a 2‑column sub‑grid, so the width becomes 50% of the outer column, not 50% of the page.

Trade‑offs and Caveats

• Sass Requirement: Jeet needs Sass 3.4+ or LibSass. If your build system uses older Sass, upgrade first.
• Gutter Must Be Set: Without $gutter, column() outputs zero spacing, leading to columns that touch. Always define a gutter if you want visual separation.
• Class Name Conflicts: Jeet’s mixins generate generic class names like .col-1-3. If you mix Jeet with another grid framework, you may get duplicate class names. Keep Jeet in its own stylesheet or namespace the mixins.
• Runtime Overhead: The mixin adds margin/padding for every column, which can slightly increase the CSS payload. For very large projects, consider disabling gutter in critical performance paths.

Putting It All Together – A Quick Checklist

1. Import Jeet at the top of your main Sass file: @import 'jeet';
2. Define a global gutter: $gutter: 1rem;
3. Use column(numerator, denominator) for each layout element.
4. When nesting, pass $context: X to match the parent grid.
5. Compile and inspect the CSS to confirm widths and margins.

With Jeet’s column() mixin, you replace repetitive math with a single, readable call, making fluid, gutter‑aware layouts easier to maintain and less error‑prone.