diff --git a/.changeset/green-lobsters-wave.md b/.changeset/green-lobsters-wave.md
new file mode 100644
index 000000000..5f494ca16
--- /dev/null
+++ b/.changeset/green-lobsters-wave.md
@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-css': patch
+---
+
+Flyout to render under the header and footer not adjacent to them.
diff --git a/css/src/components/layout.scss b/css/src/components/layout.scss
index 221b77034..d9eab6e57 100644
--- a/css/src/components/layout.scss
+++ b/css/src/components/layout.scss
@@ -101,7 +101,7 @@ $default-flyout-width-widescreen: 480px;
 	&.layout-flyout-active .layout-body {
 		@include desktop {
 			grid-template: auto auto auto 1fr auto auto / minmax(0, 1fr) var(#{$layout-flyout-width-name});
-			grid-template-areas: 'header flyout' 'hero flyout' 'menu flyout' 'main flyout' 'aside flyout' 'footer flyout';
+			grid-template-areas: 'header header' 'hero flyout' 'menu flyout' 'main flyout' 'aside flyout' 'footer footer';
 		}
 	}
 }
@@ -152,10 +152,10 @@ $default-flyout-width-widescreen: 480px;
 				auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)
 				var(#{$layout-flyout-width-name});
 			grid-template-areas:
-				'header header header flyout'
+				'header header header header'
 				'hero hero hero flyout'
 				'menu main aside flyout'
-				'footer footer footer flyout';
+				'footer footer footer footer';
 		}
 
 		@include widescreen {
@@ -163,10 +163,10 @@ $default-flyout-width-widescreen: 480px;
 				auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)
 				var(#{$layout-flyout-width-name});
 			grid-template-areas:
-				'header header header flyout'
+				'header header header header'
 				'hero hero hero flyout'
 				'menu main aside flyout'
-				'footer footer footer flyout';
+				'footer footer footer footer';
 		}
 	}
 }
@@ -214,20 +214,20 @@ $default-flyout-width-widescreen: 480px;
 					#{$layout-flyout-width-name}
 				);
 			grid-template-areas:
-				'header header flyout'
+				'header header header'
 				'hero hero flyout'
 				'menu main flyout'
-				'footer footer flyout';
+				'footer footer footer';
 		}
 		@include widescreen {
 			grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 3fr) var(
 					#{$layout-flyout-width-name}
 				);
 			grid-template-areas:
-				'header header flyout'
+				'header header header'
 				'hero hero flyout'
 				'menu main flyout'
-				'footer footer flyout';
+				'footer footer footer';
 		}
 	}
 }
@@ -275,10 +275,10 @@ $default-flyout-width-widescreen: 480px;
 					#{$layout-flyout-width-name}
 				);
 			grid-template-areas:
-				'header header flyout'
+				'header header header'
 				'hero hero flyout'
 				'main aside flyout'
-				'footer footer flyout';
+				'footer footer footer';
 		}
 
 		@include widescreen {
@@ -286,10 +286,10 @@ $default-flyout-width-widescreen: 480px;
 					#{$layout-flyout-width-name}
 				);
 			grid-template-areas:
-				'header header flyout'
+				'header header header'
 				'hero hero flyout'
 				'main aside flyout'
-				'footer footer flyout';
+				'footer footer footer';
 		}
 	}
 }
@@ -320,10 +320,10 @@ $default-flyout-width-widescreen: 480px;
 					#{$layout-flyout-width-name}
 				);
 			grid-template-areas:
-				'header header flyout'
+				'header header header'
 				'hero hero flyout'
 				'main aside flyout'
-				'footer footer flyout';
+				'footer footer footer';
 		}
 	}
 }
diff --git a/css/src/tokens/layout.scss b/css/src/tokens/layout.scss
index 2dd82c07a..4c864b990 100644
--- a/css/src/tokens/layout.scss
+++ b/css/src/tokens/layout.scss
@@ -8,8 +8,9 @@ $reading-max-width: 50rem !default;
 
 $layout-gap: 24px !default;
 $layout-widescreen-width: $breakpoint-widescreen - $layout-gap * 2 !default;
-$layout-widescreen-gap: calc(
-	50% - #{$layout-widescreen-width} / 2
+$layout-widescreen-gap: max(
+	$layout-gap,
+	calc(50% - #{$layout-widescreen-width} / 2)
 ) !default; // $layout-widescreen-gap is a naming error, keeping for backwards compat
 
 $layout-gap-custom-property-name: '--layout-gap' !default;