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; }
}