diff --git a/Gemfile b/Gemfile
index 329f289d79..7f9d08da29 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,8 +1,8 @@
 source 'https://rubygems.org'
 gem 'rake', '~> 10.0.3'
-gem 'sass', '3.2.9'
+gem 'sass', '3.2.12'
 gem 'bourbon', '~> 3.1.8'
-gem 'neat', '~> 1.3.0'
+gem 'neat', '~> 1.4.0'
 gem 'colorize', '~> 0.5.8'
 gem 'launchy', '~> 2.1.2'
 gem 'sys-proctable', '~> 0.9.3'
diff --git a/common/static/sass/neat/functions/_private.scss b/common/static/sass/neat/functions/_private.scss
index 136a6ff3a1..49683d7db5 100644
--- a/common/static/sass/neat/functions/_private.scss
+++ b/common/static/sass/neat/functions/_private.scss
@@ -56,14 +56,14 @@
 
   @for $i from 1 to $grid-columns*2 {
     @if is-even($i) {
-      $values: append($values, $transparent $column-offset);
-      $values: append($values, $color $column-offset);
+      $values: append($values, $transparent $column-offset, comma);
+      $values: append($values, $color $column-offset, comma);
       $column-offset: $column-offset + $column-width;
     }
 
     @else {
-      $values: append($values, $color $column-offset);
-      $values: append($values, $transparent $column-offset);
+      $values: append($values, $color $column-offset, comma);
+      $values: append($values, $transparent $column-offset, comma);
       $column-offset: $column-offset + $gutter-width;
     }
   }
diff --git a/common/static/sass/neat/grid/_private.scss b/common/static/sass/neat/grid/_private.scss
index acd1b5b74d..38d3fcef38 100644
--- a/common/static/sass/neat/grid/_private.scss
+++ b/common/static/sass/neat/grid/_private.scss
@@ -19,3 +19,32 @@ $layout-direction: nil !default;
 @function grid-width($n) {
   @return $n * $gw-column + ($n - 1) * $gw-gutter;
 }
+
+@function get-parent-columns($columns) {
+  @if $columns != $grid-columns {
+    $parent-columns: $columns;
+  } @else {
+    $parent-columns: $grid-columns;
+  }
+
+  @return $parent-columns;
+}
+
+@function is-display-table($container-is-display-table, $display) {
+  $display-table: false;
+
+  @if $container-is-display-table == true {
+    $display-table: true;
+  } @else if $display == table {
+    $display-table: true;
+  }
+
+  @return $display-table;
+}
+
+@function get-padding-for-table-layout($columns, $total-columns) {
+  $total-padding: flex-gutter($total-columns) * ($columns - 1);
+  $padding: $total-padding / $columns;
+
+  @return $padding;
+}
diff --git a/common/static/sass/neat/grid/_shift.scss b/common/static/sass/neat/grid/_shift.scss
index e39208ef0d..b3cb503f66 100644
--- a/common/static/sass/neat/grid/_shift.scss
+++ b/common/static/sass/neat/grid/_shift.scss
@@ -1,5 +1,4 @@
 @mixin shift($n-columns: 1) {
-
   $direction: get-direction($layout-direction, $default-layout-direction);
   $opposite-direction: get-opposite-direction($direction);
 
diff --git a/common/static/sass/neat/grid/_span-columns.scss b/common/static/sass/neat/grid/_span-columns.scss
index 97902d62c4..609c3490d7 100644
--- a/common/static/sass/neat/grid/_span-columns.scss
+++ b/common/static/sass/neat/grid/_span-columns.scss
@@ -1,45 +1,38 @@
 @mixin span-columns($span: $columns of $container-columns, $display: block) {
-
   $columns: nth($span, 1);
   $container-columns: container-span($span);
-  $display-table: false;
+
+  // Set nesting context (used by shift())
+  $parent-columns: get-parent-columns($container-columns);
 
   $direction: get-direction($layout-direction, $default-layout-direction);
   $opposite-direction: get-opposite-direction($direction);
 
-  @if $container-columns != $grid-columns {
-    $parent-columns: $container-columns;
-  } @else {
-    $parent-columns: $grid-columns;
-  }
-
-  @if $container-display-table == true {
-    $display-table: true;
-  } @else if $display == table {
-    $display-table: true;
-  } @else {
-    $display-table: false;
-  }
+  $display-table: is-display-table($container-display-table, $display);
 
   @if $display-table  {
+    $padding: get-padding-for-table-layout($columns, $container-columns);
     display: table-cell;
-    padding-#{$direction}: flex-gutter($container-columns);
-    width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
-
-    &:last-child {
-      width: flex-grid($columns, $container-columns);
-      padding-#{$direction}: 0;
-    }
-  }
-
-  @else {
+    padding-#{$direction}: $padding;
+    width: flex-grid($columns, $container-columns) + $padding;
+  } @else {
     display: block;
     float: #{$opposite-direction};
-    margin-#{$direction}: flex-gutter($container-columns);
-    width: flex-grid($columns, $container-columns);
 
-    &:last-child {
-      margin-#{$direction}: 0;
+    @if $display == collapse {
+      width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
+
+      &:last-child {
+        width: flex-grid($columns, $container-columns);
+      }
+
+    } @else {
+      margin-#{$direction}: flex-gutter($container-columns);
+      width: flex-grid($columns, $container-columns);
+
+      &:last-child {
+        margin-#{$direction}: 0;
+      }
     }
   }
 }