diff --git a/docs/index.html b/docs/index.html
index 22e972e..8078a6a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,7 +3,7 @@
 #{$scope}.#{$prefix}baseType" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}body,
 #{$scope}.#{$prefix}baseType">#{$scope}#{$sym}#{$prefix}body, #{$scope}.#{$prefix}baseType</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}.#{$prefix}baseParagraph" data-type="css"><a href="#essentials-css-#{$scope}.#{$prefix}baseParagraph">#{$scope}.#{$prefix}baseParagraph</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}.#{$prefix}hyperlink" data-type="css"><a href="#essentials-css-#{$scope}.#{$prefix}hyperlink">#{$scope}.#{$prefix}hyperlink</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}img" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}img">#{$scope}#{$sym}#{$prefix}img</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}small,
 #{$scope}.#{$prefix}type--small" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}small,
-#{$scope}.#{$prefix}type--small">#{$scope}#{$sym}#{$prefix}small, #{$scope}.#{$prefix}type--small</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}p" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}p">#{$scope}#{$sym}#{$prefix}p</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}.#{$prefix}fineprint" data-type="css"><a href="#essentials-css-#{$scope}.#{$prefix}fineprint">#{$scope}.#{$prefix}fineprint</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="grid"><a href="#grid">grid</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="grid-mixin"><a href="#grid-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="grid" data-name="auro_grid-breakpoint--xl" data-type="mixin"><a href="#grid-mixin-auro_grid-breakpoint--xl">auro_grid-breakpoint--xl</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="auro_grid-breakpoint--lg" data-type="mixin"><a href="#grid-mixin-auro_grid-breakpoint--lg">auro_grid-breakpoint--lg</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="auro_grid-breakpoint--md" data-type="mixin"><a href="#grid-mixin-auro_grid-breakpoint--md">auro_grid-breakpoint--md</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="auro_grid-breakpoint--sm" data-type="mixin"><a href="#grid-mixin-auro_grid-breakpoint--sm">auro_grid-breakpoint--sm</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="auro_grid-breakpoint--xs" data-type="mixin"><a href="#grid-mixin-auro_grid-breakpoint--xs">auro_grid-breakpoint--xs</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid_width" data-type="mixin"><a href="#grid-mixin-grid_width">grid_width</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid_margin" data-type="mixin"><a href="#grid-mixin-grid_margin">grid_margin</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid_gutter" data-type="mixin"><a href="#grid-mixin-grid_gutter">grid_gutter</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="grid-css"><a href="#grid-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="grid" data-name="#{$scope}.#{$prefix}grid" data-type="css"><a href="#grid-css-#{$scope}.#{$prefix}grid">#{$scope}.#{$prefix}grid</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="headings"><a href="#headings">headings</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="headings-css"><a href="#headings-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading">#{$scope}.#{$prefix}heading</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--display" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--display">#{$scope}.#{$prefix}heading--display</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--800" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--800">#{$scope}.#{$prefix}heading--800</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--700" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--700">#{$scope}.#{$prefix}heading--700</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--600" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--600">#{$scope}.#{$prefix}heading--600</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--500" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--500">#{$scope}.#{$prefix}heading--500</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--400" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--400">#{$scope}.#{$prefix}heading--400</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--300" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--300">#{$scope}.#{$prefix}heading--300</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="normalize"><a href="#normalize">normalize</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="normalize-css"><a href="#normalize-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="html#{$scope}" data-type="css"><a href="#normalize-css-html#{$scope}">html#{$scope}</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}body" data-type="css"><a href="#normalize-css-#{$scope}body">#{$scope}body</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}main" data-type="css"><a href="#normalize-css-#{$scope}main">#{$scope}main</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}hr" data-type="css"><a href="#normalize-css-#{$scope}hr">#{$scope}hr</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}pre" data-type="css"><a href="#normalize-css-#{$scope}pre">#{$scope}pre</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}a" data-type="css"><a href="#normalize-css-#{$scope}a">#{$scope}a</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}abbr" data-type="css"><a href="#normalize-css-#{$scope}abbr">#{$scope}abbr</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}b,
+#{$scope}.#{$prefix}type--small">#{$scope}#{$sym}#{$prefix}small, #{$scope}.#{$prefix}type--small</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}p" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}p">#{$scope}#{$sym}#{$prefix}p</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}.#{$prefix}fineprint" data-type="css"><a href="#essentials-css-#{$scope}.#{$prefix}fineprint">#{$scope}.#{$prefix}fineprint</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="grid"><a href="#grid">grid</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="grid-mixin"><a href="#grid-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="grid" data-name="auro_grid-breakpoint--xl" data-type="mixin"><a href="#grid-mixin-auro_grid-breakpoint--xl">auro_grid-breakpoint--xl</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="auro_grid-breakpoint--lg" data-type="mixin"><a href="#grid-mixin-auro_grid-breakpoint--lg">auro_grid-breakpoint--lg</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="auro_grid-breakpoint--md" data-type="mixin"><a href="#grid-mixin-auro_grid-breakpoint--md">auro_grid-breakpoint--md</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="auro_grid-breakpoint--sm" data-type="mixin"><a href="#grid-mixin-auro_grid-breakpoint--sm">auro_grid-breakpoint--sm</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="auro_grid-breakpoint--xs" data-type="mixin"><a href="#grid-mixin-auro_grid-breakpoint--xs">auro_grid-breakpoint--xs</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid_width" data-type="mixin"><a href="#grid-mixin-grid_width">grid_width</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid_margin" data-type="mixin"><a href="#grid-mixin-grid_margin">grid_margin</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid_gutter" data-type="mixin"><a href="#grid-mixin-grid_gutter">grid_gutter</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid_ratio" data-type="mixin"><a href="#grid-mixin-grid_ratio">grid_ratio</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="grid-css"><a href="#grid-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="grid" data-name="#{$scope}.#{$prefix}grid" data-type="css"><a href="#grid-css-#{$scope}.#{$prefix}grid">#{$scope}.#{$prefix}grid</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="headings"><a href="#headings">headings</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="headings-css"><a href="#headings-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading">#{$scope}.#{$prefix}heading</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--display" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--display">#{$scope}.#{$prefix}heading--display</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--800" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--800">#{$scope}.#{$prefix}heading--800</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--700" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--700">#{$scope}.#{$prefix}heading--700</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--600" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--600">#{$scope}.#{$prefix}heading--600</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--500" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--500">#{$scope}.#{$prefix}heading--500</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--400" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--400">#{$scope}.#{$prefix}heading--400</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--300" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--300">#{$scope}.#{$prefix}heading--300</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="normalize"><a href="#normalize">normalize</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="normalize-css"><a href="#normalize-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="html#{$scope}" data-type="css"><a href="#normalize-css-html#{$scope}">html#{$scope}</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}body" data-type="css"><a href="#normalize-css-#{$scope}body">#{$scope}body</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}main" data-type="css"><a href="#normalize-css-#{$scope}main">#{$scope}main</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}hr" data-type="css"><a href="#normalize-css-#{$scope}hr">#{$scope}hr</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}pre" data-type="css"><a href="#normalize-css-#{$scope}pre">#{$scope}pre</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}a" data-type="css"><a href="#normalize-css-#{$scope}a">#{$scope}a</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}abbr" data-type="css"><a href="#normalize-css-#{$scope}abbr">#{$scope}abbr</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}b,
 #{$scope}strong" data-type="css"><a href="#normalize-css-#{$scope}b,
 #{$scope}strong">#{$scope}b, #{$scope}strong</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}code,
 #{$scope}kbd,
@@ -270,6 +270,10 @@
 @import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids&quot;;</code></pre></div></section><section class="main__item container item" id="grid-mixin-grid_gutter"><h3 class="item__heading"><a class="item__name" href="#mixin-grid_gutter">grid_gutter</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin grid_gutter($gutter: 16px) { 
   gap: $gutter;
  }" data-collapsed="@mixin grid_gutter($gutter: 16px) { ... }"><code>@mixin grid_gutter($gutter: 16px) { ... }</code></pre></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$gutter</code></th><td data-label="desc"><p>Specifies the gutter/gap(horizontal &amp; vertical spacing) value between each cell of the grid.</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>16px</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids&quot;;</code></pre></div><div class="item__example example"><div class="example__description"><p>import mixin file with altered output values prior to import</p></div><pre class="example__code language-scss"><code>$gutter: $auro-grid-gutter-xs !default;
+@import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids&quot;;</code></pre></div></section><section class="main__item container item" id="grid-mixin-grid_ratio"><h3 class="item__heading"><a class="item__name" href="#mixin-grid_ratio">grid_ratio</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin grid_ratio($first, $second) { 
+  grid-template-columns: $first $second;
+ }" data-collapsed="@mixin grid_ratio($first, $second) { ... }"><code>@mixin grid_ratio($first, $second) { ... }</code></pre></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$first</code></th><td data-label="desc"><p>Specifies the percentage/ratio value for the first column of the 2 column grid.</p></td><td data-label="type"><code>String</code></td><td data-label="default">&mdash;<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$second</code></th><td data-label="desc"><p>Specifies the percentage/ratio value for the first column of the 2 column grid.</p></td><td data-label="type"><code>String</code></td><td data-label="default">&mdash;<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids&quot;;</code></pre></div><div class="item__example example"><div class="example__description"><p>import mixin file with altered output values prior to import</p></div><pre class="example__code language-scss"><code>$first: 3fr !default;
+$second: 1fr !default;
 @import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids&quot;;</code></pre></div></section></section><section class="main__sub-section" id="grid-css"><h2 class="main__heading--secondary"><div class="container">css</div></h2><section class="main__item container item" id="grid-css-#{$scope}.#{$prefix}grid"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.#{$prefix}grid">#{$scope}.#{$prefix}grid</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$scope}.#{$prefix}grid {
   display: grid;
   @include grid_width($auro-grid-breakpoint-xl);
@@ -284,25 +288,89 @@
       grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
     }
 
-    &amp;.fixed-nav {
+    &amp;.grid-sidenav {
+
+      grid-template-areas: 
+        &quot;sidenavarea&quot;
+        &quot;breadcrumbarea&quot;
+        &quot;contentarea&quot;;
 
       &gt; :first-child {
+        grid-area: sidenavarea;
         position: sticky;
         top: 0;
         --align-self: stretch;
         align-self: var(--align-self); 
       }
 
-      &gt; :nth-child(n+3) {
+      &gt; :nth-child(2) {
+        grid-area: breadcrumbarea;
+      }
+
+      &gt; :nth-child(3) {
+        grid-area: contentarea;
+      }
+
+      &gt; :nth-child(n+4) {
         display: none;
       }
-  
-      @include auro_grid-breakpoint--sm {
+
+      @include auro_grid-breakpoint--md {
+        grid-template-areas: 
+        &quot;breadcrumbarea breadcrumbarea&quot;
+        &quot;sidenavarea contentarea&quot;;
         grid-template-columns: $auro-grid-breakpoint-xs auto;
       }
+    }
+  }
 
+  &amp;.grid-cols-3 {
+    
+    grid-template-columns: auto;
+
+    @include auro_grid-breakpoint--sm {
+      grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
     }
 
+    &amp;.grid-sidenav-anchor {
+
+      grid-template-areas: 
+        &quot;sidenavarea&quot;
+        &quot;breadcrumbarea&quot;
+        &quot;contentarea&quot;
+        &quot;anchor&quot;;
+
+      &gt; :first-child {
+        grid-area: sidenavarea;
+        position: sticky;
+        top: 0;
+        --align-self: stretch;
+        align-self: var(--align-self); 
+      }
+
+      &gt; :nth-child(2) {
+        grid-area: breadcrumbarea;
+      }
+
+      &gt; :nth-child(3) {
+        grid-area: contentarea;
+      }
+
+      &gt; :nth-child(4) {
+        grid-area: anchorarea;
+      }
+
+      &gt; :nth-child(n+5) {
+        display: none;
+      }
+
+      @include auro_grid-breakpoint--md {
+        grid-template-areas: 
+        &quot;breadcrumbarea breadcrumbarea breadcrumbarea&quot;
+        &quot;sidenavarea contentarea anchorarea&quot;;
+        grid-template-columns: $auro-grid-breakpoint-xs auto calc($auro-grid-breakpoint-xs/2);
+      }
+    }
   }
 }</code>" data-collapsed="#{$scope}.#{$prefix}grid { ... }"><code>#{$scope}.#{$prefix}grid { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Grid class</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.grid {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .grid {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_grid {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Example HTML selector use</p></div><pre class="example__code language-html"><code>&lt;element class=&quot;grid&quot;&gt; ... &lt;/element&gt;</code></pre></div><div class="item__example example"><div class="example__description"><p>import file;</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids&quot;;</code></pre></div></section></section></section><section class="main__section"><h1 class="main__heading" id="headings"><div class="container">headings</div></h1><section class="main__sub-section" id="headings-css"><h2 class="main__heading--secondary"><div class="container">css</div></h2><section class="main__item container item" id="headings-css-#{$scope}.#{$prefix}heading"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.#{$prefix}heading">#{$scope}.#{$prefix}heading</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$scope}.#{$prefix}heading {
   margin: calc(#{$auro-size-200} + #{$auro-size-150}) 0;
diff --git a/src/_grids.scss b/src/_grids.scss
index fd94bb7..a78edf0 100644
--- a/src/_grids.scss
+++ b/src/_grids.scss
@@ -7,6 +7,8 @@
 
 @import 'libSupport/manageScope';
 
+$fixed-nav-width: 268px;
+$fixed-anchor-width: 168px;
 
 /// Standard breakpoint to support resolutions greater than 1232px.
 /// This mixin is to be deprecated during the next major release.
@@ -167,47 +169,53 @@
   @include grid_margin($auro-grid-margin-xs);
   @include grid_gutter($auro-grid-gutter-xs);
 
-  &.grid-cols-2 {
-    
-    grid-template-columns: auto;
-
-    @include auro_grid-breakpoint--sm {
-      grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
+  &.two-column {
+          
+    > :nth-child(1) {
+        grid-area: col1;
     }
 
-    &.grid-sidenav {
-
-      grid-template-areas: 
-        "sidenavarea"
-        "breadcrumbarea"
-        "contentarea";
-
-      > :first-child {
-        grid-area: sidenavarea;
+    > :nth-child(2) {
+        grid-area: col2;
+    }
+    
+    grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
+    grid-template-areas: 
+    "col1" 
+    "col2";
+    
+    @include auro_grid-breakpoint--md {
+        grid-template-areas: "col1 col2";
+    }
+  }
+  
+  &.fixed-nav {
+      
+    @extend .two-column;
+    
+    > :nth-child(1) {
         position: sticky;
         top: 0;
         --align-self: stretch;
         align-self: var(--align-self); 
-      }
-
-      > :nth-child(2) {
-        grid-area: breadcrumbarea;
-      }
-
-      > :nth-child(3) {
-        grid-area: contentarea;
-      }
-
-      > :nth-child(n+4) {
-        display: none;
-      }
-
-      @include auro_grid-breakpoint--md {
-        grid-template-areas: 
-        "breadcrumbarea breadcrumbarea"
-        "sidenavarea contentarea";
-        grid-template-columns: $auro-grid-breakpoint-xs auto;
-      }
     }
+    
+    @include auro_grid-breakpoint--md {
+        grid-template-columns: $fixed-nav-width auto;
+    }
+  }
+  
+  &.fixed-anchor {
+    
+    @extend .two-column;
+    grid-template-areas: 
+    "col2"
+    "col1";
+      
+    @include auro_grid-breakpoint--md {
+        grid-template-areas: "col1 col2";
+        grid-template-columns: auto $fixed-anchor-width;
+    }
+    
   }
 }