Using Jeet’s column‑span Mixin for Flexible, Responsive Layouts

Problem: Building Fluid Columns Without Manual Math

When you need an element to occupy a specific portion of a Jeet‑based grid—say, two‑thirds of the width—you could calculate percentages by hand, but any change to the grid’s column count forces you to redo the math. This manual approach also makes it hard to keep gutter values in sync across breakpoints.

How the column‑span Mixin Works

Jeet provides a column-span mixin that accepts a column count (integer or fraction) and optional gutter settings. Inside a Jeet container, the mixin references the $jeet-columns variable to turn the supplied count into a percentage width. It also outputs left and right margins that respect the gutter size defined by Jeet’s gutter mixin, and it can generate media‑query‑scoped rules when you pass a breakpoint map.

• Basic usage: @include column-span(4); in a 12‑column grid yields width: 33.3333%;.
• Responsive map: @include column-span((base:2, sm:4, lg:6)); produces separate widths for each breakpoint.
• Gutter integration: Adding @include gutter(10px); after the span adds left/right margins while keeping the calculated width.

Worked Example: A Responsive Card Block

Suppose you have a 12‑column Jeet grid and want a card that spans two columns on small screens, four columns on medium, and six columns on large, with a 12px gutter.

1. Install Jeet (run once in your project folder):

   # npm install jeet   # requires write access to node_modules
   # or yarn add jeet
   

2. Create a Sass file (e.g., styles.scss) and import Jeet:

$jeet-columns: 12;   // define grid size before importing
@import 'jeet';

3. Apply the mixin to a card component:

.card {
  @include column-span((base: 2, sm: 4, lg: 6));
  @include gutter(12px);
  /* optional styling */
  background: #fafafa;
  padding: 1rem;
}

4. Compile the Sass to CSS (using sass styles.scss styles.css or your build tool). The generated CSS will contain rules similar to:

/* base */
.card { width: 16.6666667%; margin-left: 12px; margin-right: 12px; }
@media (min-width: 480px) { /* sm breakpoint */
  .card { width: 33.3333333%; margin-left: 12px; margin-right: 12px; }
}
@media (min-width: 768px) { /* lg breakpoint */
  .card { width: 50%; margin-left: 12px; margin-right: 12px; }
}

5. To verify, open the page in a browser, inspect a .card element, and check that the computed width matches the expected percentage at each viewport size. The left/right margins should equal the gutter value you passed.

Trade‑offs and Limitations

• Dependency on $jeet-columns: If you change $jeet-columns after importing Jeet, the column-span calculations will use the final value, which can produce surprising widths if the variable is overridden later in the stylesheet. Keep the grid definition early and avoid reassigning it.
• Float‑based fallback: The mixin does not automatically clear floats. In environments that rely on float‑based layouts (Jeet 3 or earlier), you should pair it with Jeet’s clearfix mixin or switch to Jeet 4’s flexbox mode.
• Learning curve: Understanding the breakpoint map syntax requires familiarity with Jeet’s breakpoint names; however, once set, the mixin eliminates repetitive media‑query writing.

Actionable Closing

Start by defining your grid size early, install Jeet, and replace manual width calculations with column-span. Test the output at each breakpoint using browser devtools, and remember to pair the mixin with gutter for consistent spacing. If you encounter unexpected widths, check for any later changes to $jeet-columns and consider enabling flexbox mode for cleaner float handling.