1 files changed, 79 insertions, 0 deletions
diff --git a/sass/stylesheets/sass/components/_columns-wrapper.scss b/sass/stylesheets/sass/components/_columns-wrapper.scss
new file mode 100644
index 00000000000..3f10c77bf29
--- /dev/null
+++ b/sass/stylesheets/sass/components/_columns-wrapper.scss
@@ -0,0 +1,79 @@
+.columns-wrapper {
+	$column-count: (2, 3);
+	$column-size: (
+			5: 5%,
+			10: 10%,
+			15: 15%,
+			20: 20%,
+			33: 33.33333%,
+			35: 35%,
+			40: 40%,
+			50: 50%,
+			75: 75%,
+			90: 90%,
+			95: 95%
+	);
+
+	display: flex;
+	flex-wrap: wrap;
+	align-items: start;
+
+	&.columns-nowrap {
+		flex-wrap: nowrap;
+	}
+
+	// Dynamically generated classes for the columns count:
+	//  .columns-2
+	//  .columns-3
+	@each $count in $column-count {
+		&.columns-#{$count} > {
+			div,
+			li {
+				display: block;
+				flex: 0 0 (100% / $count);
+				max-width: (100% / $count);
+			}
+		}
+	}
+
+	// Dynamically generated classes for the column width:
+	//  .column-5
+	//  .column-10
+	//  .column-15
+	//  .column-20
+	//  .column-33
+	//  .column-35
+	//  .column-40
+	//  .column-50
+	//  .column-75
+	//  .column-90
+	//  .column-95
+	@each $class, $width in $column-size {
+		.column-#{$class} {
+			flex: 0 0 $width;
+			max-width: $width;
+		}
+	}
+
+	.column-center {
+		display: flex;
+		justify-content: center;
+		text-align: center;
+	}
+
+	.column-middle {
+		display: flex;
+		align-items: center;
+	}
+
+	& > {
+		div,
+		ul {
+			&:not(:last-child) {
+				section {
+					margin-right: 10px;
+				}
+			}
+		}
+	}
+}