diff --git a/packages/fiori/src/FlexibleColumnLayout.js b/packages/fiori/src/FlexibleColumnLayout.js
index a4a832ab73d7..1a3c62549633 100644
--- a/packages/fiori/src/FlexibleColumnLayout.js
+++ b/packages/fiori/src/FlexibleColumnLayout.js
@@ -112,6 +112,30 @@ const metadata = {
 			type: Integer,
 			defaultValue: 0,
 		},
+
+		/**
+		 * Defines how much of the total width in % the smaller column will take on two-column layouts
+		 * For example 33 means 33/67 and 67/33, 20 means 20/80 and 80/20, etc...
+		 *
+		 * @type {Integer}
+		 * @private
+		 */
+		_smallerColumnSizeTwoColumns: {
+			type: Integer,
+			defaultValue: 33,
+		},
+
+		/**
+		 * Defines how much of the total width in % each of the smaller columns will take on three-column layouts
+		 * For example, 25 means 25/50/25 and 25/25/50, 20 means 20/60/20 and 20/20/60, etc...
+		 *
+		 * @type {Integer}
+		 * @private
+		 */
+		_smallerColumnSizeThreeColumns: {
+			type: Integer,
+			defaultValue: 25,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.FlexibleColumnLayout.prototype */ {
 		/**
@@ -383,7 +407,7 @@ class FlexibleColumnLayout extends UI5Element {
 	}
 
 	nextColumnLayout(layout) {
-		return getLayoutsByMedia()[this.media][layout].layout;
+		return getLayoutsByMedia(this._smallerColumnSizeTwoColumns, this._smallerColumnSizeThreeColumns)[this.media][layout].layout;
 	}
 
 	calcVisibleColumns(colLayot) {
@@ -559,7 +583,7 @@ class FlexibleColumnLayout extends UI5Element {
 	}
 
 	get effectiveArrowsInfo() {
-		return getLayoutsByMedia()[this.media][this.layout].arrows;
+		return getLayoutsByMedia(this._smallerColumnSizeTwoColumns, this._smallerColumnSizeThreeColumns)[this.media][this.layout].arrows;
 	}
 
 	get media() {
diff --git a/packages/fiori/src/fcl-utils/FCLLayout.js b/packages/fiori/src/fcl-utils/FCLLayout.js
index fb6c5397d088..ce8a6ca85893 100644
--- a/packages/fiori/src/fcl-utils/FCLLayout.js
+++ b/packages/fiori/src/fcl-utils/FCLLayout.js
@@ -1,4 +1,7 @@
-const getLayoutsByMedia = () => {
+const getLayoutsByMedia = (smallTwo = 33, smallThree = 25) => {
+	const bigTwo = 100 - smallTwo; // 67% by spec
+	const bigThree = 100 - 2 * smallThree; // 50% by spec
+
 	return {
 		desktop: {
 			"OneColumn": {
@@ -9,49 +12,49 @@ const getLayoutsByMedia = () => {
 				],
 			},
 			"TwoColumnsStartExpanded": {
-				layout: ["67%", "33%", 0],
+				layout: [`${bigTwo}%`, `${smallTwo}%`, 0],
 				arrows: [
 					{ visible: true, dir: "mirror" },
 					{ visible: false, dir: null },
 				],
 			},
 			"TwoColumnsMidExpanded": {
-				layout: ["33%", "67%", 0],
+				layout: [`${smallTwo}%`, `${bigTwo}%`, 0],
 				arrows: [
 					{ visible: true, dir: null },
 					{ visible: false, dir: null },
 				],
 			},
 			"ThreeColumnsStartExpanded": {
-				layout: ["25%", "50%", "25%"],
+				layout: [`${smallThree}%`, `${bigThree}%`, `${smallThree}%`],
 				arrows: [
 					{ visible: true, dir: null },
 					{ visible: true, dir: null },
 				],
 			},
 			"ThreeColumnsMidExpanded": {
-				layout: ["25%", "50%", "25%"],
+				layout: [`${smallThree}%`, `${bigThree}%`, `${smallThree}%`],
 				arrows:	[
 					{ visible: true, dir: null },
 					{ visible: true, dir: null },
 				],
 			},
 			"ThreeColumnsEndExpanded": {
-				layout: ["25%", "25%", "50%"],
+				layout: [`${smallThree}%`, `${smallThree}%`, `${bigThree}%`],
 				arrows: [
 					{ visible: false, dir: null, separator: true },
 					{ visible: true, dir: "mirror" },
 				],
 			},
 			"ThreeColumnsStartExpandedEndHidden": {
-				layout: ["67%", "33%", 0],
+				layout: [`${bigTwo}%`, `${smallTwo}%`, 0],
 				arrows: [
 					{ visible: true, dir: "mirror" },
 					{ visible: false, dir: null },
 				],
 			},
 			"ThreeColumnsMidExpandedEndHidden": {
-				layout: ["33%", "67%", 0],
+				layout: [`${smallTwo}%`, `${bigTwo}%`, 0],
 				arrows: [
 					{ visible: true, dir: null },
 					{ visible: true, dir: null },
@@ -81,49 +84,49 @@ const getLayoutsByMedia = () => {
 				],
 			},
 			"TwoColumnsStartExpanded": {
-				layout: ["67%", "33%", 0],
+				layout: [`${bigTwo}%`, `${smallTwo}%`, 0],
 				arrows: [
 					{ visible: true, dir: "mirror" },
 					{ visible: false, dir: null },
 				],
 			},
 			"TwoColumnsMidExpanded": {
-				layout: ["33%", "67%", 0],
+				layout: [`${smallTwo}%`, `${bigTwo}%`, 0],
 				arrows: [
 					{ visible: true, dir: null },
 					{ visible: false, dir: null },
 				],
 			},
 			"ThreeColumnsStartExpanded": {
-				layout: ["67%", "33%", 0],
+				layout: [`${bigTwo}%`, `${smallTwo}%`, 0],
 				arrows: [
 					{ visible: true, dir: "mirror" },
 					{ visible: false, dir: null },
 				],
 			},
 			"ThreeColumnsMidExpanded": {
-				layout: [0, "67%", "33%"],
+				layout: [0, `${bigTwo}%`, `${smallTwo}%`],
 				arrows: [
 					{ visible: true, dir: null },
 					{ visible: true, dir: null },
 				],
 			},
 			"ThreeColumnsEndExpanded": {
-				layout: [0, "33%", "67%"],
+				layout: [0, `${smallTwo}%`, `${bigTwo}%`],
 				arrows: [
 					{ visible: false, dir: null },
 					{ visible: true, dir: "mirror" },
 				],
 			},
 			"ThreeColumnsStartExpandedEndHidden": {
-				layout: ["67%", "33%", 0],
+				layout: [`${bigTwo}%`, `${smallTwo}%`, 0],
 				arrows: [
 					{ visible: true, dir: "mirror" },
 					{ visible: false, dir: null },
 				],
 			},
 			"ThreeColumnsMidExpandedEndHidden": {
-				layout: ["33%", "67%", 0],
+				layout: [`${smallTwo}%`, `${bigTwo}%`, 0],
 				arrows: [
 					{ visible: true, dir: null },
 					{ visible: true, dir: null },
diff --git a/packages/fiori/test/pages/FCL.html b/packages/fiori/test/pages/FCL.html
index 01deca1ae08e..f1a243eec94d 100644
--- a/packages/fiori/test/pages/FCL.html
+++ b/packages/fiori/test/pages/FCL.html
@@ -573,6 +573,55 @@
 		</div>
 	</ui5-flexible-column-layout>
 
+	<ui5-flexible-column-layout id="fcl_custom" layout="ThreeColumnsMidExpanded" _smaller-column-size-two-columns="10" _smaller-column-size-three-columns="10">
+		<!-- start column -->
+		<div style="box-sizing: border-box;" slot="startColumn">
+			<div style="padding: 1rem">
+				<ui5-title>Column 1</ui5-title>
+			</div>
+			<ui5-list>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+			</ui5-list>
+		</div>
+
+		<!-- mid column -->
+		<div style="box-sizing: border-box;" slot="midColumn">
+			<div style="padding: 1rem">
+				<ui5-title>Column 2</ui5-title>
+			</div>
+			<ui5-list>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+			</ui5-list>
+		</div>
+
+		<!-- end column -->
+		<div style="box-sizing: border-box;" slot="endColumn">
+			<div style="padding: 1rem">
+				<ui5-title>Column 3</ui5-title>
+			</div>
+
+			<ui5-list>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+				<ui5-li>Hello worild!</ui5-li>
+			</ui5-list>
+		</div>
+	</ui5-flexible-column-layout>
+
 	<script>
 		var counter = 0;
 		var counter2 = 0;
@@ -586,7 +635,7 @@
 			layoutChangeRes4.value = ++counter;
 
 		});
-	
+
 		fcl3.addEventListener("ui5-layout-change", function(e) {
 			testLayoutChange.value = ++counter2;
 		});