# The missing gutter

## The problem.

Designers skip the last gutter and grid systems don’t understand this. This makes life difficult when wanting to make things 1/3rds with a gutter that is fixed.

## The solution.

Don’t bother with grid systems to try and solve this issue. Just do some very simple math but with some mental calculations.

Here are some examples.

#### 4 elements, each spanning 3 columns

This means we have 3 gutters being used and the last one is missing. Because there are 3 out of 4 gutters showing, you should add 75% of a gutter’s width to each column.

Sounds weird right? Here’s the code

```
$gutter: 1.5rem;
/* Three columns, Four elements */
.three_columns{
width: calc(25% - #{$gutter * 0.75});
}
/* Four columns, three elements */
.three_columns{
width: calc(33% - #{$gutter * 0.66});
}
```

The way it works is you say “there are only 5 gutters, there should be 6. So I’m going to get 5/6th of the gutter and add that to the width of every column with a gutter.”

## The mixin.

```
// Strip unit function https://css-tricks.com/snippets/sass/strip-unit-function/
@function strip-unit($number) {
@if type-of($number) == 'number' and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}
/*
* @param: $width - width in percent
* @param: $gutter - gutter in rem or px
* @param: $last - if this is the last item
* @usage: missing_gutter_column_calculation(50%, 1.875rem)
*/
@mixin missing_gutter_column_calculation( $width, $gutter, $last: false){
// Percentage stripped
$fraction: 100 / strip-unit($width);
$three_quarters: ($fraction - 1) / $fraction;
width: calc(#{$width} - #{$gutter * $three_quarters});
.no-csscalc & { width: ($width - (strip-unit($gutter) * $three_quarters)) }
// If this is the last item
@if ($last == false){ margin-right: $gutter; }
}
```