1 files changed, 63 insertions, 58 deletions
diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss
index 9a76f97546..f210b64df6 100644
--- a/openecomp-ui/resources/scss/components/_grid.scss
+++ b/openecomp-ui/resources/scss/components/_grid.scss
@@ -1,66 +1,71 @@
-$gridItemSpace: 15%;
-
 .grid-section {
-		&:not(:last-of-type) {
-			padding-bottom: 30px;
-		}
-		.grid-items {
-			display: flex;
-			flex-direction: row;
-			flex-wrap: wrap;
-		}
-
-		%grid-col-base {
-			flex-shrink: 0;
-			display: flex;
-		}
-
-		.grid-item {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-		}
-
-		.grid-item-stretch {
-			@extend .grid-item;
-			& *:last-child {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-			}
-		}
+  $gridItemSpace: 15%;
 
-		.grid-col-1 {
-			@extend %grid-col-base;
-			flex-basis: 25%;
-      &:after {
-        flex-basis: $gridItemSpace;
+  @mixin gridCol($numOfCols, $flexBasis) {
+    .#{grid-col- + $numOfCols} {
+      @extend %grid-col-base;
+      flex-basis:  $flexBasis;
+      &:not(.last-col-in-row):after {
+        flex-basis: $gridItemSpace / $numOfCols;
         content: ' ';
       }
-		}
+    }
+  }
 
-		.grid-col-2 {
-			@extend %grid-col-base;
-			flex-basis: 50%;
-      &:after {
-        flex-basis: $gridItemSpace / 2;
-        content: ' ';
-      }
-		}
-		.grid-col-3 {
-			@extend %grid-col-base;
-			flex-basis: 75%;
-      &:after {
-        flex-basis: $gridItemSpace / 3;
-        content: ' ';
+  @mixin gridColWithLastColumn($numOfCols, $flexBasis, $flexBasisLast) {
+    .#{grid-col- + $numOfCols} {
+      @extend %grid-col-base;
+      &:not(.last-col-in-row) {
+        flex-basis:  $flexBasis;
+        margin-right: 5%;
       }
-		}
-		.grid-col-4 {
-			@extend %grid-col-base;
-			flex-basis: 100%;
-      &:after {
-        flex-basis: $gridItemSpace / 4;
-        content: ' ';
+      &.last-col-in-row {
+        flex-basis:  $flexBasisLast;
       }
-		}
+    }
+  }
+
+  &:not(:last-of-type) {
+    padding-bottom: 30px;
+  }
+
+  .grid-items {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  %grid-col-base {
+    flex-shrink: 0;
+    display: flex;
+  }
+
+  .grid-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .grid-item-stretch {
+    @extend .grid-item;
+    & *:last-child {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  &.has-last-col-set {
+    @include gridColWithLastColumn(1, 21%, 22%);
+    @include gridColWithLastColumn(2, 47%, 48%);
+    @include gridColWithLastColumn(3, 73%, 74%);
+    @include gridColWithLastColumn(4, 100%, 100%);
+  }
+
+  &:not(.has-last-col-set) {
+    @include gridCol(1, 25%);
+    @include gridCol(2, 50%);
+    @include gridCol(3, 75%);
+    @include gridCol(4, 100%);
+  }
 }