@graupl/graupl 1.0.0-beta.0 → 1.0.0-beta.10

package/packages/core/src/scss/layout/container/_index.scss

@@ -0,0 +1,628 @@
+// @graupl/core container layout styles.
+//
+// This module provides the layout styles for the container component.
+//
+// The container component is a grid container that provides a layout for the main content of a page.
+// It is divided into four sections:
+// - Full-width: A full-width section that spans the entire width of the container.
+// - Feature: A feature section that is used for feature content.
+// - Breakout: A breakout section that is used for breakout content.
+// - Content: The main content section that contains all other content.
+//
+// Optionally, the container component can have sidebars, which divides the content section into five sections:
+// - Sidebar-left: A left sidebar section that is used for sidebar content.
+// - Sidebar-right: A right sidebar section that is used for sidebar content.
+// - Inner-content: A section that contains the main content of the page.
+// - Content-left: A section that contains the sidebar-left and inner-content sections.
+// - Content-right: A section that contains the inner-content and sidebar-right sections.
+//
+// The container layout is as follows:
+// | full-width | feature | breakout | content | breakout | feature | full-width |
+//
+// Nesting a container directly inside of another container will cause the
+// nested container to inherit the grid columns of the parent container.
+//
+// The following classes are generated by default:
+// - `.container`: The main container component.
+// - `.full-width`: A full-width container component.
+// - `.feature`: A feature container component.
+// - `.breakout`: A breakout container component.
+// - `.contain`: A utility class to contain child elements to the content section of the container grid.
+// - `.sidebars`: A utility class to enable sidebars in the container.
+// - `.sidebar-left`: A left sidebar container component.
+// - `.sidebar-right`: A right sidebar container component.
+// - `.content-left`: A left content container component.
+// - `.content-right`: A right content container component.
+// - `.inner-content`: A utility class to contain child elements to the inner content section of the container grid.
+//
+// The following custom properties control the generated classes:
+// - `--graupl-container-gap`: The gap between the container sections.
+// - `--graupl-container-content-max-width`: The maximum width of the content section.
+// - `--graupl-container-sidebar-width`: The width of the sidebar sections.
+// - `--graupl-container-breakout-max-width`: The maximum width of the breakout section.
+// - `--graupl-container-feature-max-width`: The maximum width of the feature section.
+// - `--graupl-container-full-width-section-min-width`: The minimum width of one side of the full-width section.
+// - `--graupl-container-full-width-section-max-width`: The maximum width of one side of the full-width section.
+// - `--graupl-container-feature-section-min-width`: The minimum width of one side of the feature section.
+// - `--graupl-container-feature-section-max-width`: The maximum width of one side of the feature section.
+// - `--graupl-container-breakout-section-min-width`: The minimum width of one side of the breakout section.
+// - `--graupl-container-breakout-section-max-width`: The maximum width of one side of the breakout section.
+// - `--graupl-container-content-section-min-width`: The minimum width of the content section.
+// - `--graupl-container-content-section-max-width`: The maximum width of the content section.
+// - `--graupl-container-full-width-section-width`: The calculated minmax width of the full-width section.
+// - `--graupl-container-feature-section-width`: The calculated minmax width of the feature section.
+// - `--graupl-container-breakout-section-width`: The calculated minmax width of the breakout section.
+// - `--graupl-container-content-section-width`: The calculated minmax width of the content section.
+// - `--graupl-container-sidebar-left-section-width`: The width of the left sidebar section.
+// - `--graupl-container-sidebar-right-section-width`: The width of the right sidebar section.
+// - `--graupl-container-inner-content-section-width`: The calculated minmax width of the inner content section.
+//
+// The following variables control the generated classes:
+// - `$container-selector-base`: The base selector for the container component.
+// - `$container-selector`: The selector for the container component.
+// - `$container-breakout-selector-base`: The base selector for the breakout container component.
+// - `$container-breakout-selector`: The selector for the breakout container component.
+// - `$container-feature-selector-base`: The base selector for the feature container component.
+// - `$container-feature-selector`: The selector for the feature container component.
+// - `$container-full-width-selector-base`: The base selector for the full-width container component.
+// - `$container-full-width-selector`: The selector for the full-width container component.
+// - `$container-contain-selector-base`: The base selector for the contain utility class.
+// - `$container-contain-selector`: The selector for the contain utility class.
+// - `$container-sidebars-selector-base`: The base selector for the sidebars utility class.
+// - `$container-sidebars-selector`: The selector for the sidebars utility class.
+// - `$container-content-selector-base`: The base selector for the content container component.
+// - `$container-content-selector`: The selector for the content container component.
+// - `$container-sidebar-selector-base`: The base selector for the sidebar container component.
+// - `$container-sidebar-selector`: The selector for the sidebar container component.
+// - `$container-left-selector-suffix`: The suffix for the left sidebar selector.
+// - `$container-right-selector-suffix`: The suffix for the right sidebar selector.
+// - `$container-inner-selector-prefix`: The prefix for the inner content selector.
+// - `$container-breakout-width`: The width of the breakout section will extend from the content section.
+// - `$container-feature-width`: The width of the feature section will extend from the breakout section.
+// - `$container-sidebar-width`: The width of the sidebar sections.
+//
+// @example
+//   <div class="container">
+//     Regular content
+//     <div class="full-width">
+//       Full-width content
+//     </div>
+//     <div class="feature">
+//       Feature content
+//     </div>
+//     <div class="breakout">
+//       Breakout content
+//     </div>
+//   </div>
+//
+// @example
+//   <div class="container">
+//     Regular content
+//     <div class="feature contain">
+//       Contained feature content
+//     </div>
+//   </div>
+//
+// @example
+//   <div class="container sidebars">
+//     <div class="sidebar-left">
+//       Left sidebar content
+//     </div>
+//     <div class="content-right">
+//       Content right content
+//     </div>
+//   </div>
+//
+// @example
+//   <div class="container sidebars">
+//     <div class="content-left">
+//       Content left content
+//     </div>
+//     <div class="sidebar-right">
+//       Right sidebar content
+//     </div>
+//   </div>
+//
+// @example
+//   <div class="container sidebars">
+//     <div class="sidebar-left">
+//       Left sidebar content
+//     </div>
+//     <div class="inner-content">
+//       Inner content content
+//     </div>
+//     <div class="sidebar-right">
+//       Right sidebar content
+//     </div>
+//   </div>
+
+@use "../../mixins/screen";
+@use "../../mixins/layer" as *;
+@use "defaults";
+@use "variables" as *;
+
+@include layer(layout) {
+  // .container
+  #{defaults.$container-selector-base}#{defaults.$container-selector} {
+    display: grid;
+    grid-template-columns:
+      [full-width-start] $container-full-width-section-width
+      [feature-start] $container-feature-section-width
+      [breakout-start] $container-breakout-section-width
+      [content-start] $container-content-section-width
+      [content-end]
+      $container-breakout-section-width [breakout-end]
+      $container-feature-section-width [feature-end]
+      $container-full-width-section-width [full-width-end];
+    container-type: inline-size;
+
+    // Container components should span the full width of their parent container
+    // and inherit the grid columns.
+    //
+    // > .container
+    > #{defaults.$container-selector-base}#{defaults.$container-selector} {
+      grid-column: 1/-1;
+      grid-template-columns: subgrid;
+      container-type: normal;
+    }
+
+    // Everything in the container that isn't a container component should
+    // be in the content section.
+    //
+    // > :not(.container, .breakout, .feature, .full-width)
+    > :not(
+        #{defaults.$container-selector-base}#{defaults.$container-selector},
+        #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+        #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+        #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
+      ) {
+      grid-column: content;
+    }
+
+    // Contain components should inherit the container's grid columns and
+    // force all children to be in the content section.
+    //
+    // > .contain
+    #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
+      display: grid;
+      grid-template-columns: subgrid;
+
+      // > :not(.container, .breakout, .feature, .full-width)
+      > :not(
+          #{defaults.$container-selector-base}#{defaults.$container-selector},
+          #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+          #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+          #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
+        ) {
+        grid-column: content;
+      }
+    }
+
+    // Set up the container components to span the appropriate grid columns.
+    //
+    // .breakout
+    #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector} {
+      grid-column: breakout;
+    }
+
+    // .feature
+    #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {
+      grid-column: feature;
+    }
+
+    // .full-width
+    #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector} {
+      grid-column: full-width;
+    }
+
+    // &.sidebars
+    &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector} {
+      // .sidebar-left
+      #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix} {
+        display: grid;
+        grid-column: 1 / -1;
+        grid-template-columns: subgrid;
+
+        // > :not(.container, .breakout, .feature, .full-width, .sidebar-left)
+        > :not(
+            #{defaults.$container-selector-base}#{defaults.$container-selector},
+            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
+            #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix}
+          ) {
+          grid-column: content;
+        }
+      }
+
+      // .sidebar-right
+      #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix} {
+        display: grid;
+        grid-column: 1 / -1;
+        grid-template-columns: subgrid;
+
+        // > :not(.container, .breakout, .feature, .full-width, .sidebar-right)
+        > :not(
+            #{defaults.$container-selector-base}#{defaults.$container-selector},
+            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
+            #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
+          ) {
+          grid-column: content;
+        }
+      }
+
+      // .content-right
+      #{defaults.$container-content-selector-base}#{defaults.$container-content-selector}#{defaults.$container-right-selector-suffix} {
+        display: grid;
+        grid-column: 1 / -1;
+        grid-template-columns: subgrid;
+
+        // > :not(.container, .breakout, .feature, .full-width, .sidebar-right)
+        > :not(
+            #{defaults.$container-selector-base}#{defaults.$container-selector},
+            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
+            #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
+          ) {
+          grid-column: content;
+        }
+
+        // Contain components should inherit the container's grid columns and
+        // force all children to be in the content section.
+        //
+        // > .contain
+        #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
+          // > :not(.container, .breakout, .feature, .full-width)
+          > :not(
+              #{defaults.$container-selector-base}#{defaults.$container-selector},
+              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
+              #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
+            ) {
+            grid-column: content;
+          }
+        }
+      }
+
+      // .content-left
+      #{defaults.$container-content-selector-base}#{defaults.$container-content-selector}#{defaults.$container-left-selector-suffix} {
+        display: grid;
+        grid-column: 1 / -1;
+        grid-template-columns: subgrid;
+
+        // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)
+        > :not(
+            #{defaults.$container-selector-base}#{defaults.$container-selector},
+            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
+            #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
+            #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
+          ) {
+          grid-column: content;
+        }
+
+        // Contain components should inherit the container's grid columns and
+        // force all children to be in the content section.
+        //
+        // > .contain
+        #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
+          // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)
+          > :not(
+              #{defaults.$container-selector-base}#{defaults.$container-selector},
+              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
+              #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
+              #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
+            ) {
+            grid-column: content;
+          }
+        }
+      }
+
+      // .inner-content
+      #{defaults.$container-content-selector-base}#{defaults.$container-inner-selector-prefix}#{defaults.$container-content-selector} {
+        display: grid;
+        grid-column: 1 / -1;
+        grid-template-columns: subgrid;
+
+        // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)
+        > :not(
+            #{defaults.$container-selector-base}#{defaults.$container-selector},
+            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
+            #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
+            #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
+          ) {
+          grid-column: content;
+        }
+
+        // Contain components should inherit the container's grid columns and
+        // force all children to be in the content section.
+        //
+        // > .contain
+        #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
+          // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)
+          > :not(
+              #{defaults.$container-selector-base}#{defaults.$container-selector},
+              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
+              #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
+              #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
+            ) {
+            grid-column: content;
+          }
+        }
+      }
+    }
+
+    @include screen.trigger(allow-sidebars) {
+      // &.sidebars
+      &#{defaults.$container-sidebars-selector-base}#{defaults.$container-sidebars-selector} {
+        grid-template-columns:
+          [full-width-start] $container-full-width-section-width
+          [feature-start] $container-feature-section-width
+          [breakout-start] $container-breakout-section-width
+          [content-start sidebar-left-start content-left-start] $container-sidebar-left-section-width
+          [sidebar-left-end inner-content-start content-right-start] $container-inner-content-section-width
+          [content-left-end inner-content-end sidebar-right-start] $container-sidebar-right-section-width
+          [content-right-end sidebar-right-end content-end]
+          $container-breakout-section-width [breakout-end]
+          $container-feature-section-width [feature-end]
+          $container-full-width-section-width [full-width-end];
+
+        // .sidebar-left
+        #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix} {
+          grid-row: 1;
+
+          // Make sure other container classes do not break the layout inside of the sidebar.
+          //
+          // &:not(.container)
+          &:not(
+              #{defaults.$container-selector-base}#{defaults.$container-selector}
+            ) {
+            // &, .container, .breakout, .feature, .full-width
+            &,
+            #{defaults.$container-selector-base}#{defaults.$container-selector},
+            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {
+              grid-column-end: sidebar-left-end;
+            }
+          }
+
+          // Lock content to the sidebar-left section.
+          //
+          // > :not(.container, .breakout, .feature, .full-width)
+          > :not(
+              #{defaults.$container-selector-base}#{defaults.$container-selector},
+              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
+            ) {
+            grid-column: sidebar-left;
+          }
+
+          // Contain components should inherit the container's grid columns and
+          // force all children to be in the sidebar-left section.
+          //
+          // > .contain
+          #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
+            // > :not(.container, .breakout, .feature, .full-width)
+            > :not(
+                #{defaults.$container-selector-base}#{defaults.$container-selector},
+                #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+                #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+                #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
+              ) {
+              grid-column: sidebar-left;
+            }
+          }
+        }
+
+        // .sidebar-right
+        #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix} {
+          grid-row: 1;
+
+          // Make sure other container classes do not break the layout inside of the sidebar.
+          //
+          // &:not(.container)
+          &:not(
+              #{defaults.$container-selector-base}#{defaults.$container-selector}
+            ) {
+            // &, .container, .breakout, .feature, .full-width
+            &,
+            #{defaults.$container-selector-base}#{defaults.$container-selector},
+            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {
+              grid-column-start: sidebar-right-start;
+            }
+          }
+
+          // Lock content to the sidebar-right section.
+          //
+          // > :not(.container, .breakout, .feature, .full-width)
+          > :not(
+              #{defaults.$container-selector-base}#{defaults.$container-selector},
+              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
+            ) {
+            grid-column: sidebar-right;
+          }
+
+          // Contain components should inherit the container's grid columns and
+          // force all children to be in the sidebar-right section.
+          //
+          // > .contain
+          #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
+            // > :not(.container, .breakout, .feature, .full-width)
+            > :not(
+                #{defaults.$container-selector-base}#{defaults.$container-selector},
+                #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+                #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+                #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
+              ) {
+              grid-column: sidebar-right;
+            }
+          }
+        }
+
+        // .content-right
+        #{defaults.$container-content-selector-base}#{defaults.$container-content-selector}#{defaults.$container-right-selector-suffix} {
+          grid-row: 1;
+
+          // Make sure other container classes do not break the layout inside of the content.
+          //
+          // &:not(.container)
+          &:not(
+              #{defaults.$container-selector-base}#{defaults.$container-selector}
+            ) {
+            // &, .container, .breakout, .feature, .full-width
+            &,
+            #{defaults.$container-selector-base}#{defaults.$container-selector},
+            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {
+              grid-column-start: content-right-start;
+            }
+          }
+
+          // Lock content to the content-right section.
+          //
+          // > :not(.container, .breakout, .feature, .full-width)
+          > :not(
+              #{defaults.$container-selector-base}#{defaults.$container-selector},
+              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
+            ) {
+            grid-column: content-right;
+          }
+
+          // Contain components should inherit the container's grid columns and
+          // force all children to be in the content-right section.
+          //
+          // > .contain
+          #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
+            // > :not(.container, .breakout, .feature, .full-width)
+            > :not(
+                #{defaults.$container-selector-base}#{defaults.$container-selector},
+                #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+                #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+                #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
+              ) {
+              grid-column: content-right;
+            }
+          }
+        }
+
+        // .content-left
+        #{defaults.$container-content-selector-base}#{defaults.$container-content-selector}#{defaults.$container-left-selector-suffix} {
+          grid-row: 1;
+
+          // Make sure other container classes do not break the layout inside of the content.
+          //
+          // &:not(.container)
+          &:not(
+              #{defaults.$container-selector-base}#{defaults.$container-selector}
+            ) {
+            // &, .container, .breakout, .feature, .full-width
+            &,
+            #{defaults.$container-selector-base}#{defaults.$container-selector},
+            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {
+              grid-column-end: content-left-end;
+            }
+          }
+
+          // Lock content to the content-left section.
+          //
+          // > :not(.container, .breakout, .feature, .full-width)
+          > :not(
+              #{defaults.$container-selector-base}#{defaults.$container-selector},
+              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
+            ) {
+            grid-column: content-left;
+          }
+
+          // Contain components should inherit the container's grid columns and
+          // force all children to be in the content-left section.
+          //
+          // > .contain
+          #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
+            // > :not(.container, .breakout, .feature, .full-width)
+            > :not(
+                #{defaults.$container-selector-base}#{defaults.$container-selector},
+                #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+                #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+                #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
+              ) {
+              grid-column: content-left;
+            }
+          }
+        }
+
+        // .inner-content
+        #{defaults.$container-content-selector-base}#{defaults.$container-inner-selector-prefix}#{defaults.$container-content-selector} {
+          grid-row: 1;
+
+          // Make sure other container classes do not break the layout inside of the content.
+          //
+          // &:not(.container)
+          &:not(
+              #{defaults.$container-selector-base}#{defaults.$container-selector}
+            ) {
+            // &, .container, .breakout, .feature, .full-width
+            &,
+            #{defaults.$container-selector-base}#{defaults.$container-selector},
+            #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+            #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+            #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector} {
+              grid-column: inner-content;
+            }
+          }
+
+          // Lock content to the inner-content section.
+          //
+          // > :not(.container, .breakout, .feature, .full-width)
+          > :not(
+              #{defaults.$container-selector-base}#{defaults.$container-selector},
+              #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+              #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+              #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
+            ) {
+            grid-column: inner-content;
+          }
+
+          // Contain components should inherit the container's grid columns and
+          // force all children to be in the inner-content section.
+          //
+          // > .contain
+          #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
+            // > :not(.container, .breakout, .feature, .full-width)
+            > :not(
+                #{defaults.$container-selector-base}#{defaults.$container-selector},
+                #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
+                #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
+                #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
+              ) {
+              grid-column: inner-content;
+            }
+          }
+        }
+      }
+    }
+  }
+}