diff --git a/scss/_forms.scss b/scss/_forms.scss
index ff9a016de7..fe95fd2797 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -4,6 +4,5 @@
 @import "forms/form-check";
 @import "forms/form-file";
 @import "forms/form-range";
-@import "forms/layout";
 @import "forms/input-group";
 @import "forms/validation";
diff --git a/scss/_grid.scss b/scss/_grid.scss
index 8bcb419e18..e4e3c97962 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -5,18 +5,44 @@
 @if $enable-grid-classes {
   .row {
     @include make-row();
+
+    > * {
+      @include make-col-ready();
+    }
   }
+}
 
-  // Remove the negative margin from default .row, then the horizontal padding
-  // from all immediate children columns (to prevent runaway style inheritance).
-  .no-gutters {
-    margin-right: 0;
-    margin-left: 0;
+// Gutters
+//
+// Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
 
-    > .col,
-    > [class*="col-"] {
-      padding-right: 0;
-      padding-left: 0;
+@if $enable-grid-classes {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+
+      @each $key, $value in $gutters {
+        .g#{$infix}-#{$key},
+        .gx#{$infix}-#{$key} {
+          margin-right: -$value / 2;
+          margin-left: -$value / 2;
+
+          > * {
+            padding-right: $value / 2;
+            padding-left: $value / 2;
+          }
+        }
+
+        .g#{$infix}-#{$key},
+        .gy#{$infix}-#{$key} {
+          margin-top: -$value;
+
+          > * {
+            margin-top: $value;
+          }
+        }
+      }
     }
   }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index e4268c3f56..624cb2bd22 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -301,9 +301,10 @@ $container-max-widths: (
 // Set the number of columns and specify the width of the gutters.
 
 $grid-columns:                12 !default;
-$grid-gutter-width:           30px !default;
+$grid-gutter-width:           1.5rem !default;
 $grid-row-columns:            6 !default;
 
+$gutters: $spacers !default;
 
 // Container padding
 
@@ -659,10 +660,6 @@ $form-text-margin-top:                  .25rem !default;
 
 $form-check-inline-margin-right:        1rem !default;
 
-$form-check-input-margin-x:             .25rem !default;
-
-$form-grid-gutter-width:                10px !default;
-
 $input-group-addon-color:               $input-color !default;
 $input-group-addon-bg:                  $gray-200 !default;
 $input-group-addon-border-color:        $input-border-color !default;
diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index ff7905c900..8a76c9956e 100644
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -18,6 +18,7 @@ html {
 @import "functions";
 @import "variables";
 
+@import "mixins/lists";
 @import "mixins/breakpoints";
 @import "mixins/container";
 @import "mixins/grid";
diff --git a/scss/forms/_layout.scss b/scss/forms/_layout.scss
deleted file mode 100644
index eaef926b2d..0000000000
--- a/scss/forms/_layout.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-// Form grid
-//
-// Special replacement for our grid system's `.row` for tighter form layouts.
-
-@if $enable-grid-classes {
-  .form-row {
-    display: flex;
-    flex-wrap: wrap;
-    margin-right: -$form-grid-gutter-width / 2;
-    margin-left: -$form-grid-gutter-width / 2;
-
-    > .col,
-    > [class*="col-"] {
-      padding-right: $form-grid-gutter-width / 2;
-      padding-left: $form-grid-gutter-width / 2;
-    }
-  }
-}
-
-// Inline forms
-//
-// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
-// forms begin stacked on extra small (mobile) devices and then go inline when
-// viewports reach <768px.
-
-.form-inline {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
-
-  // Because we use flex, the initial sizing of checkboxes is collapsed and
-  // doesn't occupy the full-width (which is what we want for xs grid tier),
-  // so we force that here.
-  .form-check {
-    width: 100%;
-  }
-
-  // Kick in the inline
-  @include media-breakpoint-up(sm) {
-    label {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: 0;
-    }
-
-    .form-control {
-      display: inline-block;
-      width: auto; // Prevent labels from stacking above inputs
-      vertical-align: middle;
-    }
-
-    // Make static controls behave like regular ones
-    .form-control-plaintext {
-      display: inline-block;
-    }
-
-    .input-group,
-    .form-select {
-      width: auto;
-    }
-
-    // Remove default margin on radios/checkboxes that were used for stacking, and
-    // then undo the floating of radios and checkboxes to match.
-    .form-check {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: auto;
-      padding-left: 0;
-    }
-    .form-check-input {
-      position: relative;
-      flex-shrink: 0;
-      margin-top: 0;
-      margin-right: $form-check-input-margin-x;
-      margin-left: 0;
-    }
-  }
-}
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index f89ff1e3ee..ef97a61bfa 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -10,27 +10,24 @@
 }
 
 @mixin make-col-ready($gutter: $grid-gutter-width) {
-  position: relative;
   // Prevent columns from becoming too narrow when at smaller grid tiers by
-  // always setting `width: 100%;`. This works because we use `flex` values
+  // always setting `width: 100%;`. This works because we set the width
   // later on to override this initial width.
+  flex-shrink: 0;
   width: 100%;
+  max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
   padding-right: $gutter / 2;
   padding-left: $gutter / 2;
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
-  flex: 0 0 percentage($size / $columns);
-  // Add a `max-width` to ensure content within each column does not blow out
-  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
-  // do not appear to require this.
-  max-width: percentage($size / $columns);
+  flex: 0 0 auto;
+  width: percentage($size / $columns);
 }
 
 @mixin make-col-auto() {
   flex: 0 0 auto;
   width: auto;
-  max-width: 100%; // Reset earlier grid tiers
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
@@ -45,8 +42,8 @@
 // style grid.
 @mixin row-cols($count) {
   & > * {
-    flex: 0 0 100% / $count;
-    max-width: 100% / $count;
+    flex: 0 0 auto;
+    width: 100% / $count;
   }
 }
 
@@ -56,35 +53,14 @@
 // any value of `$grid-columns`.
 
 @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
-  // Common properties for all breakpoints
-  %grid-column {
-    position: relative;
-    width: 100%;
-    padding-right: $gutter / 2;
-    padding-left: $gutter / 2;
-  }
-
   @each $breakpoint in map-keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 
-    // Allow columns to stretch full width below their breakpoints
-    @for $i from 1 through $columns {
-      .col#{$infix}-#{$i} {
-        @extend %grid-column;
-      }
-    }
-    .col#{$infix},
-    .col#{$infix}-auto {
-      @extend %grid-column;
-    }
-
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .col#{$infix} {
-        flex-basis: 0;
-        flex-grow: 1;
+        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
         min-width: 0; // See https://github.com/twbs/bootstrap/issues/25410
-        max-width: 100%;
       }
 
       @for $i from 1 through $grid-row-columns {