diff --git a/components/badge/CHANGELOG.md b/components/badge/CHANGELOG.md
index 5c5f239422..95a336f5d7 100644
--- a/components/badge/CHANGELOG.md
+++ b/components/badge/CHANGELOG.md
@@ -229,7 +229,7 @@
 ### Features
 
 * **connotation:** adding support for warning connotation ([#488](https://github.com/vonage/vivid/issues/488)) ([245a9b9](https://github.com/vonage/vivid/commit/245a9b9c095b2af4f3d9a088d0c6219370199c2d))
-* **vwc-inline:** new component to handle inline layouts ([9b03d6b](https://github.com/vonage/vivid/commit/9b03d6b3171c891985a10c77edfc2f78b78be68d))
+* **vwc-layout:** new component to handle inline layouts ([9b03d6b](https://github.com/vonage/vivid/commit/9b03d6b3171c891985a10c77edfc2f78b78be68d))
 
 
 
diff --git a/components/layout/CHANGELOG.md b/components/layout/CHANGELOG.md
index 221f4b0dd5..7a686881b4 100644
--- a/components/layout/CHANGELOG.md
+++ b/components/layout/CHANGELOG.md
@@ -1,4 +1,220 @@
-## [2.20.1](https://github.com/vonage/vivid/compare/v2.20.0...v2.20.1) (2021-10-07)
+# [2.20.0](https://github.com/vonage/vivid/compare/v2.19.0...v2.20.0) (2021-10-07)
+
+
+### Features
+
+* **vwc-inline:** add more inline size options ([#1053](https://github.com/vonage/vivid/issues/1053)) ([1b8020d](https://github.com/vonage/vivid/commit/1b8020d4a0137801444bc5182d12949d902def86))
+
+
+
+# [2.19.0](https://github.com/vonage/vivid/compare/v2.18.1...v2.19.0) (2021-10-04)
+
+
+
+## [2.18.1](https://github.com/vonage/vivid/compare/v2.18.0...v2.18.1) (2021-08-25)
+
+
+
+# [2.18.0](https://github.com/vonage/vivid/compare/v2.17.0...v2.18.0) (2021-08-24)
+
+
+
+# [2.17.0](https://github.com/vonage/vivid/compare/v2.16.1...v2.17.0) (2021-08-09)
+
+
+
+## [2.16.1](https://github.com/vonage/vivid/compare/v2.16.0...v2.16.1) (2021-07-29)
+
+
+
+# [2.16.0](https://github.com/vonage/vivid/compare/v2.15.0...v2.16.0) (2021-07-28)
+
+
+
+# [2.15.0](https://github.com/vonage/vivid/compare/v2.14.0...v2.15.0) (2021-07-20)
+
+
+
+# [2.14.0](https://github.com/vonage/vivid/compare/v2.13.0...v2.14.0) (2021-07-13)
+
+
+
+# [2.13.0](https://github.com/vonage/vivid/compare/v2.12.0...v2.13.0) (2021-07-04)
+
+
+
+# [2.12.0](https://github.com/vonage/vivid/compare/v2.11.0...v2.12.0) (2021-06-14)
+
+
+
+# [2.11.0](https://github.com/vonage/vivid/compare/v2.10.0...v2.11.0) (2021-06-07)
+
+
+
+# [2.10.0](https://github.com/vonage/vivid/compare/v2.9.1...v2.10.0) (2021-06-04)
+
+
+
+## [2.9.1](https://github.com/vonage/vivid/compare/v2.9.0...v2.9.1) (2021-05-27)
+
+
+
+# [2.9.0](https://github.com/vonage/vivid/compare/v2.8.0...v2.9.0) (2021-05-24)
+
+
+
+# [2.8.0](https://github.com/vonage/vivid/compare/v2.7.0...v2.8.0) (2021-05-20)
+
+
+
+# [2.7.0](https://github.com/vonage/vivid/compare/v2.6.2...v2.7.0) (2021-05-17)
+
+
+
+## [2.6.2](https://github.com/vonage/vivid/compare/v2.6.1...v2.6.2) (2021-05-05)
+
+
+
+## [2.6.1](https://github.com/vonage/vivid/compare/v2.6.0...v2.6.1) (2021-05-04)
+
+
+
+# [2.6.0](https://github.com/vonage/vivid/compare/v2.5.0...v2.6.0) (2021-05-03)
+
+
+
+# [2.5.0](https://github.com/vonage/vivid/compare/v2.4.1...v2.5.0) (2021-04-22)
+
+
+
+## [2.4.1](https://github.com/vonage/vivid/compare/v2.4.0...v2.4.1) (2021-04-21)
+
+
+
+# [2.4.0](https://github.com/vonage/vivid/compare/v2.3.0...v2.4.0) (2021-04-19)
+
+
+
+# [2.3.0](https://github.com/vonage/vivid/compare/v2.2.4...v2.3.0) (2021-04-08)
+
+
+### Features
+
+* **vwc-layout:** add support for auto-fill/fit variance ([#746](https://github.com/vonage/vivid/issues/746)) ([17732b3](https://github.com/vonage/vivid/commit/17732b372d14cbba7708e3cf9332e1899850d3cd))
+
+
+
+## [2.2.4](https://github.com/vonage/vivid/compare/v2.2.3...v2.2.4) (2021-04-05)
+
+
+
+## [2.2.3](https://github.com/vonage/vivid/compare/v2.2.2...v2.2.3) (2021-03-30)
+
+
+
+## [2.2.2](https://github.com/vonage/vivid/compare/v2.2.1...v2.2.2) (2021-03-19)
+
+
+
+## [2.2.1](https://github.com/vonage/vivid/compare/v2.2.0...v2.2.1) (2021-03-18)
+
+
+
+# [2.2.0](https://github.com/vonage/vivid/compare/v2.1.0...v2.2.0) (2021-03-17)
+
+
+
+# [2.1.0](https://github.com/vonage/vivid/compare/v2.0.4...v2.1.0) (2021-03-16)
+
+
+
+## [2.0.4](https://github.com/vonage/vivid/compare/v2.0.3...v2.0.4) (2021-03-03)
+
+
+
+## [2.0.3](https://github.com/vonage/vivid/compare/v2.0.2...v2.0.3) (2021-02-28)
+
+
+
+## [2.0.2](https://github.com/vonage/vivid/compare/v2.0.1...v2.0.2) (2021-02-24)
+
+
+
+## [2.0.1](https://github.com/vonage/vivid/compare/v2.0.0...v2.0.1) (2021-02-23)
+
+
+
+# [2.0.0](https://github.com/vonage/vivid/compare/v1.3.1...v2.0.0) (2021-02-22)
+
+
+
+## [1.3.1](https://github.com/vonage/vivid/compare/v1.3.0...v1.3.1) (2021-02-11)
+
+
+
+# [1.3.0](https://github.com/vonage/vivid/compare/v1.2.0...v1.3.0) (2021-02-11)
+
+
+
+# [1.2.0](https://github.com/vonage/vivid/compare/v1.1.3...v1.2.0) (2021-02-03)
+
+
+
+## [1.1.3](https://github.com/vonage/vivid/compare/v1.1.2...v1.1.3) (2021-01-27)
+
+
+
+## [1.1.2](https://github.com/vonage/vivid/compare/v1.1.1...v1.1.2) (2021-01-27)
+
+
+
+## [1.1.1](https://github.com/vonage/vivid/compare/v1.1.0...v1.1.1) (2021-01-25)
+
+
+
+# [1.1.0](https://github.com/vonage/vivid/compare/v1.0.4...v1.1.0) (2021-01-25)
+
+
+
+## [1.0.4](https://github.com/vonage/vivid/compare/v1.0.3...v1.0.4) (2021-01-19)
+
+
+
+## [1.0.2](https://github.com/vonage/vivid/compare/v1.0.1...v1.0.2) (2021-01-15)
+
+
+
+## [1.0.1](https://github.com/vonage/vivid/compare/v1.0.0...v1.0.1) (2021-01-15)
+
+
+
+# [1.0.0](https://github.com/vonage/vivid/compare/v0.19.1...v1.0.0) (2021-01-13)
+
+
+
+## [0.19.1](https://github.com/vonage/vivid/compare/v0.19.0...v0.19.1) (2021-01-10)
+
+
+
+# [0.19.0](https://github.com/vonage/vivid/compare/v0.17.2...v0.19.0) (2021-01-07)
+
+
+
+## [0.17.2](https://github.com/vonage/vivid/compare/v0.17.1...v0.17.2) (2020-12-17)
+
+
+### Bug Fixes
+
+* **inline:** patched typescript warning ([6a96d02](https://github.com/vonage/vivid/commit/6a96d02c4c0181e955ba4450b1c278dbb556909d))
+
+
+
+## [0.17.1](https://github.com/vonage/vivid/compare/v0.17.0...v0.17.1) (2020-12-15)
+
+
+### Features
+
+* **vwc-layout:** new component to handle inline layouts ([9b03d6b](https://github.com/vonage/vivid/commit/9b03d6b3171c891985a10c77edfc2f78b78be68d))
 
 
 
diff --git a/components/layout/package.json b/components/layout/package.json
index 05343cfa32..b3fdd4e128 100644
--- a/components/layout/package.json
+++ b/components/layout/package.json
@@ -21,7 +21,7 @@
 	"scripts": {
 		"test": "echo \"Error: run tests from root\" && exit 1",
 		"build:typescript": "tsc -b",
-		"build:styles": "umbrella-style-modules",
+		"build:styles": "umbrella-style-modules --path=\"./src\"",
 		"build": "yarn run build:styles && yarn run build:typescript"
 	},
 	"bugs": {
@@ -36,4 +36,4 @@
 		"@vonage/vvd-umbrella": "2.20.1",
 		"typescript": "^4.3.2"
 	}
-}
+}
\ No newline at end of file
diff --git a/components/layout/src/partials/_vwc-layout-functions.scss b/components/layout/src/partials/_vwc-layout-functions.scss
new file mode 100644
index 0000000000..bd25fc580f
--- /dev/null
+++ b/components/layout/src/partials/_vwc-layout-functions.scss
@@ -0,0 +1,15 @@
+@function get-default-selector($list, $prefix) {
+	$selector: '';
+	@each $item in $list {
+		$selector: $selector + ':not(#{$prefix}-#{$item})';
+	}
+	@return $selector;
+}
+
+@function get-selector-with-default($prefix, $key, $default-key, $all-keys) {
+	$selector: '&#{$prefix}-#{$key}';
+	@if $key == $default-key {
+		$selector: '&#{get-default-selector($all-keys, $prefix)}', $selector;
+	}
+	@return $selector;
+}
diff --git a/components/layout/src/partials/_vwc-layout-mixins.scss b/components/layout/src/partials/_vwc-layout-mixins.scss
new file mode 100644
index 0000000000..a1d56a82e8
--- /dev/null
+++ b/components/layout/src/partials/_vwc-layout-mixins.scss
@@ -0,0 +1,5 @@
+@mixin measurement($types...) {
+	@each $type in $types {
+		@content($type);
+	}
+}
diff --git a/components/layout/src/partials/_vwc-layout-variables.scss b/components/layout/src/partials/_vwc-layout-variables.scss
new file mode 100644
index 0000000000..3db59af5b2
--- /dev/null
+++ b/components/layout/src/partials/_vwc-layout-variables.scss
@@ -0,0 +1,22 @@
+$layout-auto-sizing: --layout-auto-sizing;
+
+/* #region SIZEs */
+$auto-sizes: (
+	fill: auto-fill,
+	fit: auto-fit,
+);
+
+/* #region BASES */
+$bases: (
+	sm: 10rem,
+	md: 20rem,
+	lg: 30rem,
+	block: 1fr
+);
+
+/* #region SPACES */
+$spaces: (
+	xs: 16px,
+	md: 24px,
+	xl: 32px,
+);
diff --git a/components/layout/src/vwc-layout.scss b/components/layout/src/vwc-layout.scss
index 70fa0b25b1..85c57dbcae 100644
--- a/components/layout/src/vwc-layout.scss
+++ b/components/layout/src/vwc-layout.scss
@@ -1,58 +1,37 @@
 @use 'sass:map';
 
-$items-min-inline-size-v-name: --items-min-inline-size;
-$items-spacing-v-name: --items-spacing;
-$gutters-v-name: --gutters;
-$auto-sizing: --auto-sizing;
-
-/* #region SIZE */
-$items-min-inline-sizes: (
-	sm: 10rem,
-	md: 20rem,
-	lg: 30rem,
-);
-
-/* #region SPACEING */
-$items-spacings: (
-	xs: 16px,
-	md: 24px,
-	xl: 32px,
-);
-
-@each $key, $value in $items-min-inline-sizes {
-	.layout-column-basis-#{$key} {
-		#{$items-min-inline-size-v-name}: $value;
-	}
-}
-
-@each $key, $value in $items-spacings {
-	.layout-column-spacing-#{$key} {
-		#{$items-spacing-v-name}: $value;
-	}
-	.layout-gutters-#{$key} {
-		#{$gutters-v-name}: $value;
-	}
-}
+@use 'partials/vwc-layout-variables' as variables;
+@use 'partials/vwc-layout-mixins' as mixins;
+@use 'partials/vwc-layout-functions' as functions;
 
 .layout {
 	display: grid;
-	margin: var(#{$gutters-v-name}, 0);
-	gap: var(#{$items-spacing-v-name}, #{map.get($items-spacings, md)});
 	grid-auto-rows: min-content;
-	grid-template-columns: repeat(
-		var(#{$auto-sizing}),
-		minmax(var(#{$items-min-inline-size-v-name}, #{map.get($items-min-inline-sizes, lg)}), 1fr)
-	);
 
-	&:not(.layout-auto-sizing-fill),
-	&.layout-auto-sizing-fit {
-		#{$auto-sizing}: auto-fit;
+	@include mixins.measurement(map.keys(variables.$bases)...) using ($basis) {
+		#{functions.get-selector-with-default(".layout-column-basis", $basis, md, map.keys(variables.$bases))} {
+			grid-template-columns: repeat(
+				var(#{variables.$layout-auto-sizing}),
+				minmax(map.get(variables.$bases, $basis), 1fr)
+			);
+		}
 	}
-	&.layout-auto-sizing-fill {
-		#{$auto-sizing}: auto-fill;
+
+	@include mixins.measurement(map.keys(variables.$spaces)...) using ($space) {
+		#{functions.get-selector-with-default(".layout-column-spacing", $space, md, map.keys(variables.$spaces))} {
+			gap: map.get(variables.$spaces, $space);
+		}
+	}
+
+	@include mixins.measurement(map.keys(variables.$spaces)...) using ($space) {
+		&.layout-gutters-#{$space} {
+			margin: map.get(variables.$spaces, $space);
+		}
 	}
 
-	&.layout-column-basis-block {
-		grid-template-columns: 1fr;
+	@include mixins.measurement(map.keys(variables.$auto-sizes)...) using ($size) {
+		#{functions.get-selector-with-default(".layout-auto-sizing", $size, fit, map.keys(variables.$auto-sizes))} {
+			#{variables.$layout-auto-sizing}: map.get(variables.$auto-sizes, $size);
+		}
 	}
 }
diff --git a/components/layout/stories/inline-basic.stories.js b/components/layout/stories/layout-basic.stories.js
similarity index 100%
rename from components/layout/stories/inline-basic.stories.js
rename to components/layout/stories/layout-basic.stories.js
diff --git a/docs/stories/getting-started/usage-examples/login.stories.js b/docs/stories/getting-started/usage-examples/login.stories.js
new file mode 100644
index 0000000000..6e8d66dd84
--- /dev/null
+++ b/docs/stories/getting-started/usage-examples/login.stories.js
@@ -0,0 +1,106 @@
+import '@vonage/vwc-side-drawer';
+import '@vonage/vwc-text';
+import '@vonage/vwc-icon';
+import '@vonage/vwc-layout';
+import '@vonage/vwc-button';
+import '@vonage/vwc-textfield';
+import '@vonage/vwc-checkbox';
+
+import { html } from 'lit-element';
+
+export default {
+	title: 'Getting Started/Usage Examples/Side Drawer',
+};
+
+const style = html`
+  <style>
+      div#login {
+        display: flex;
+      }
+      .password {
+        text-align: end;
+        padding: 8px 0px;
+      }
+      vwc-side-drawer#side-drawer {
+        --side-drawer-inline-size: 600px;
+      }
+      main {
+        width: 100%;
+        position: relative;
+        background-color: var(--vvd-color-neutral-20);
+      }
+      #content {
+        position: absolute;
+        bottom: 20px;
+        left: 20px;
+      }
+      .sb-show-main.sb-main-padded {
+			  padding: 0;
+		  }
+  </style>
+`;
+
+const sideDrawer = () => html`<vwc-side-drawer id="side-drawer" hasTopBar>
+  <span slot="top-bar">
+    <vwc-icon type="vonage-mono"></vwc-icon>
+    <vwc-text font-face="body-1-bold"> VONAGE</vwc-text>
+  </span>
+  <form>
+    <vwc-layout column-basis="block" gutters="xl">
+      <section>
+        <vwc-text font-face="title-2">Welcome back!</vwc-text>
+      </section>
+      <section>
+        <vwc-text font-face="body-2">Don't have an account? <a href="#">Sign Up</a></vwc-text>
+      </section>
+      <section>
+        <vwc-layout column-basis="block">
+          <vwc-textfield name="username" label="username" icon="user" placeholder=" " outlined="">
+            <input value="" slot="formInputElement" class="vivid-input-internal" name="username" type="text"
+              placeholder=" " />
+          </vwc-textfield>
+          <vwc-textfield name="password" label="password" icon="lock" type="password" placeholder=" " outlined="">
+            <input value="" slot="formInputElement" class="vivid-input-internal" name="password" type="password"
+              placeholder=" " />
+          </vwc-textfield>
+        </vwc-layout>
+      </section>
+      <section>
+        <vwc-layout>
+          <vwc-formfield label="Remember me">
+            <vwc-checkbox></vwc-checkbox>
+          </vwc-formfield>
+          <vwc-text class="password" font-face="body-2"><a href="#">Forgot password?</a></vwc-text>
+        </vwc-layout>
+      </section>
+      <section>
+        <vwc-button layout="filled">Log in</vwc-button>
+      </section>
+    </vwc-layout>
+  </form>
+</vwc-side-drawer>`;
+
+const content = () => html`<vwc-layout id="content" column-basis="block">
+  <section>
+    <vwc-text font-face="subtitle-1">Lorem ipsum</vwc-text>
+  </section>
+  <section>
+    <vwc-text font-face="body-1">Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</vwc-text>
+  </section>
+  <section>
+    <vwc-button label="Apply Now →" layout="outlined" type="submit" outlined=""></vwc-button>
+  </section>
+</vwc-layout>`;
+
+const WithLogInTemplate = () => html`
+  ${style}
+  <div id="login">
+    ${sideDrawer()}
+    <main>
+      ${content()}
+    </main>
+  </div>
+`;
+
+export const WithLogIn = WithLogInTemplate.bind({});
+WithLogIn.args = {};
diff --git a/docs/stories/getting-started/usage-examples/side-drawer-as-container.stories.js b/docs/stories/getting-started/usage-examples/side-drawer-as-container.stories.js
index 2152fa6dc6..6de47f7b00 100644
--- a/docs/stories/getting-started/usage-examples/side-drawer-as-container.stories.js
+++ b/docs/stories/getting-started/usage-examples/side-drawer-as-container.stories.js
@@ -2,11 +2,11 @@ import '@vonage/vwc-side-drawer';
 import '@vonage/vwc-top-app-bar';
 import '@vonage/vwc-top-app-bar-fixed';
 import '@vonage/vwc-icon';
+import '@vonage/vwc-layout';
 
 import { html } from 'lit-element';
 import { spread } from '@open-wc/lit-helpers';
 
-
 export default {
 	title: 'Getting Started/Usage Examples/Side Drawer',
 	argTypes: {
@@ -32,9 +32,16 @@ export default {
 };
 
 const loremIpsum = () => html`
+<vwc-layout gutters="xs">
 	<p>
-		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+		standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
+		a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
+		remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+		Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
+		of Lorem Ipsum.
 	</p>
+</vwc-layout>
 `;
 
 const content = () => Array(8).fill().map(loremIpsum);
@@ -58,14 +65,14 @@ const topAppBarContent = html`
 const WithAppContentTemplate = args => html`
 	${style}
 	<vwc-side-drawer alternate hastopbar ...=${spread(args)}>
-			<span slot="top-bar">Side drawer top bar</span>
-			Should top bar font face differ from body?
+		<span slot="top-bar">Side drawer top bar</span>
+		Should top bar font face differ from body?
+		${content()}
+	
+		<main slot="app-content">
 			${content()}
-
-			<main slot="app-content">
-				${content()}
-			</main>
-		</vwc-side-drawer>
+		</main>
+	</vwc-side-drawer>
 `;
 
 export const WithAppContent = WithAppContentTemplate.bind({});
@@ -74,18 +81,18 @@ WithAppContent.args = {};
 const WithTopAppBarTemplate = args => html`
 	${style}
 	<vwc-side-drawer alternate hastopbar ...=${spread(args)}>
-			<span slot="top-bar">Side drawer top bar</span>
-			Should top bar font face differ from body?
-			${content()}
-
-			<vwc-top-app-bar slot="app-content">
-				${topAppBarContent}
-			</vwc-top-app-bar>
-		</vwc-side-drawer>
+		<span slot="top-bar">Side drawer top bar</span>
+		Should top bar font face differ from body?
+		${content()}
+	
+		<vwc-top-app-bar slot="app-content">
+			${topAppBarContent}
+		</vwc-top-app-bar>
+	</vwc-side-drawer>
 `;
 
 export const WithTopAppBar = WithTopAppBarTemplate.bind({});
-WithTopAppBar.args = { };
+WithTopAppBar.args = {};
 
 const Masthead = () => html`
 	<vwc-icon type="vonage-solid"></vwc-icon>
@@ -95,15 +102,15 @@ const Masthead = () => html`
 const WithTopAppBarFixedTemplate = args => html`
 	${style}
 	<vwc-side-drawer alternate hastopbar ...=${spread(args)}>
-			<span slot="top-bar">${Masthead()}</span>
-			Should top bar font face differ from body?
-			${content()}
-
-			<vwc-top-app-bar-fixed slot="app-content">
-				${topAppBarContent}
-			</vwc-top-app-bar-fixed>
-		</vwc-side-drawer>
+		<span slot="top-bar">${Masthead()}</span>
+		Should top bar font face differ from body?
+		${content()}
+	
+		<vwc-top-app-bar-fixed alternate slot="app-content">
+			${topAppBarContent}
+		</vwc-top-app-bar-fixed>
+	</vwc-side-drawer>
 `;
 
 export const WithTopAppBarFixed = WithTopAppBarFixedTemplate.bind({});
-WithTopAppBarFixed.args = { };
+WithTopAppBarFixed.args = {};