Simplifying Responsive Grids with Jeet’s ‘span’ Mixin

Why the ‘span’ mixin matters

When building a responsive layout, developers often hand‑craft CSS for each breakpoint: width: 50%; margin: 0 5%;, then tweak for mobile, tablet, and desktop. The result is verbose and fragile. Jeet’s @include jeet-span() mixin encapsulates that boilerplate into a single, reusable statement that outputs a CSS class with the correct width, margin, and display properties for the desired fraction of the grid. This means you can declare a column once and let Jeet handle the heavy lifting.

How the mixin works

The mixin takes a fractional value (e.g., 1/3) and an optional map of breakpoints. Internally, it calculates the percentage width, sets display: block for the column, and generates media queries for each breakpoint. In Jeet 3+ the output uses CSS Grid; in Jeet 2 it falls back to floats.

Example mixin call (Sass syntax):

@include jeet-span(1/3, $breakpoints);

Resulting CSS (simplified):

.col-1-3 { width: 33.3333%; display: block; }
@media (min-width: 768px) { .col-1-3 { width: 33.3333%; } }

Worked example: 2/3 – 1/3 split that stacks on mobile

Assume we want a two‑column layout on desktop with a 2/3 – 1/3 split, but on mobile we want the columns to stack vertically.

1. Define breakpoints in a Sass map:

$breakpoints: (mobile: 0, desktop: 768px);

1. Create two column classes using the mixin:

.col-2-3 { @include jeet-span(2/3, $breakpoints); }
.col-1-3 { @include jeet-span(1/3, $breakpoints); }

1. Use the classes in HTML:

<div class="container">
  <div class="col-2-3">Main content</div>
  <div class="col-1-3">Sidebar</div>
</div>

When the viewport width is below 768px, Jeet generates CSS that sets width: 100% for both columns, causing them to stack. Above 768px, the columns keep their 2/3 and 1/3 widths.

Trade‑offs and limitations

• Pre‑processor requirement: The mixin is written in Sass. Projects that use plain CSS or a different pre‑processor must compile Jeet separately.
• Jeet version: Jeet 3+ uses CSS Grid; Jeet 2 uses floats. Verify the installed version before applying the example.
• Box‑sizing effects: The mixin outputs percentage widths. If the container has padding or borders, the effective width may shrink unless box-sizing: border-box is applied.
• Class naming collisions: The generated classes (.col-1-3, etc.) may clash with existing utility classes. Prefixing or namespacing is advisable.

Verification checklist

1. Install Jeet: npm i jeet.
   1. Import the Sass file into your project: @import "node_modules/jeet/jeet.scss";
   2. Compile to CSS (e.g., using sass --watch src:dist).
2. Open the compiled CSS and confirm that .col-1-3 contains width: 33.3333% and display: block.
3. Create a minimal HTML page that references the compiled CSS, add the .col-2-3 and .col-1-3 classes to <div> elements, and open in Chrome.
   1. Resize the viewport to check that the layout stacks below 768px and splits above.
   2. Use Chrome DevTools’ CSS Grid inspector to verify the grid tracks and column sizes.
4. Run a stylelint check with the Jeet plugin to ensure no syntax errors.

Actionable takeaway

If you’re already using Sass and need a quick, maintainable way to manage column widths across breakpoints, try Jeet’s jeet-span mixin. It reduces repetitive CSS, keeps your styles DRY, and gives you a single place to update column ratios. Just remember to verify your Jeet version, keep box-sizing in mind, and namespace your classes to avoid collisions.