Cells that span multiple columns

If using the class based system, cells can be made to take up more than just a single column width by using a grid__cell--span-# class. The # being the number of columns you wish for the cell to span.

Alternatively, if you are using the mixin based system, you can use the seperate grid__cell--span mixin to calculate the width for you. The syntax for it goes like this:

@include grid__cell--span(
  [Number of columns to span],
  [Total number of columns],
  [Optional place to add "!important" if you need it]
);

The first 2 parameters are required but the 3rd parameter is a completely optional parameter designed to add !important to the rule if you need to. The only think this mixin does is calculate the width for you so it's perfectly fine to write out the width manually if that's easier.

<div class="grid grid--cols-4">
  <div class="grid__cell -color-1 grid__cell--span-3"></div>
  <div class="grid__cell -color-2"></div>
  <div class="grid__cell -color-3"></div>
  <div class="grid__cell -color-4"></div>
  <div class="grid__cell -color-5"></div>
  <div class="grid__cell -color-6"></div>
</div>

<div class="mixin-10">
  <div class="mixin__cell -color-1 mixin__cellSpan"></div>
  <div class="mixin__cell -color-2"></div>
  <div class="mixin__cell -color-3"></div>
  <div class="mixin__cell -color-4"></div>
  <div class="mixin__cell -color-5"></div>
  <div class="mixin__cell -color-6"></div>
</div>

.mixin-10 {
  @include grid(4);
}

.mixin__cellSpan {
  //You can use the mixin to do the math for you
  @include grid__cell--span(3, 4);

  //or you can do the math yourself
  width: 75%;

  //or let the browser do the math
  width: calc(3 / 4 * 100%);

  //The mixin also adds flex-grow to close off any extra space
  flex-grow: 1;
}

Grids that feature column spans often don't play nicely with the default media queries. Applying flex-grow: 1; to the multi-spanning grid cell can help mitigate this issue. It is usually best to simply disable the media queries on that particular grid though and write your own custom styles with new media queries.

To disable media queries on a grid, add the grid--noMQs class if using the class based system. If using the mixin, set the $MQs variable to false. Alternatively you may like to use the $breakpoints setting in the Gutter Grid mixin to create new breakpoints for the module instead. You will likely still need to custom-style the multi-spanning grid cell though.

<div class="grid grid--cols-4 grid--noMQs">
  <div class="grid__cell -color-1 grid__cell--span-3"></div>
  <div class="grid__cell -color-2"></div>
  <div class="grid__cell -color-3"></div>
  <div class="grid__cell -color-4"></div>
  <div class="grid__cell -color-5"></div>
  <div class="grid__cell -color-6"></div>
</div>

<div class="mixin-11">
  <div class="mixin__cell -color-1 mixin__cellSpan"></div>
  <div class="mixin__cell -color-2"></div>
  <div class="mixin__cell -color-3"></div>
  <div class="mixin__cell -color-4"></div>
  <div class="mixin__cell -color-5"></div>
  <div class="mixin__cell -color-6"></div>
</div>

.mixin__cellSpan {
  @include grid__cell--span(3, 4);
}
.mixin-11 {
  @include grid(4, $MQs: false);
}

Disabling media queries is also useful on small grids that have column counts defined. Grids are often used on components that do not take up the full width of the page. These sorts of grids will usually need their own custom media query widths applied.