1 files changed, 64 insertions, 0 deletions
diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss
new file mode 100644
index 0000000000..d4d1fa7ccd
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_grid.scss
@@ -0,0 +1,64 @@
+$gridItemSpace: 15%;
+
+.grid-section {
+		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;
+			}
+		}
+
+		.grid-col-1 {
+			@extend %grid-col-base;
+			flex-basis: 25%;
+      &:after {
+        flex-basis: $gridItemSpace;
+        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: ' ';
+      }
+		}
+		.grid-col-4 {
+			@extend %grid-col-base;
+			flex-basis: 100%;
+      &:after {
+        flex-basis: $gridItemSpace / 4;
+        content: ' ';
+      }
+		}
+}