Add grid-layout-center-last() mixin to center last items in block grid, closes #7807

diff --git a/scss/grid/_layout.scss b/scss/grid/_layout.scss
index e88d8cd87b6c59493f69d0ec5d7cbaadd9675f76..9f5da07c2c23b6687fff3ada6bba20d4bc56f278 100644 (file)
--- a/scss/grid/_layout.scss
+++ b/scss/grid/_layout.scss
@@ -31,3 +31,21 @@
     }
   }
 }
+
+/// Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row.
+///
+/// @param {Number} $n - Number of items that appear in each row.
+@mixin grid-layout-center-last($n) {
+  @for $i from 1 to $n {
+    @if $i == 1 {
+      &:nth-child(#{$n}n+1):last-child {
+        margin-left: (100 - 100/$n * $i) / 2 * 1%;
+      }
+    }
+    @else {
+      &:nth-child(#{$n}n+1):nth-last-child(#{$i}) {
+        margin-left: (100 - 100/$n * $i) / 2 * 1%;
+      }
+    }
+  }
+}