Update docs for new XXL grid tier

- Updates mentions of number and exact tiers
- Updates grid example to include xxl container
- Adds some scss-docs references
- Cleans up other grid mentions and docs
- Updates navbar example to include an expand at XXL variant

1 files changed, 35 insertions, 0 deletions

diff --git a/site/assets/scss/_layout.scss b/site/assets/scss/_layout.scss
new file mode 100644
index 0000000000..116df720ee
--- /dev/null
+++ b/site/assets/scss/_layout.scss
@@ -0,0 +1,35 @@
+.bd-layout {
+  @include media-breakpoint-up(md) {
+    display: grid;
+    gap: $grid-gutter-width;
+    grid-template-areas:
+      "sidebar intro"
+      "sidebar toc"
+      "sidebar content";
+    grid-template-columns: 1fr 3fr;
+  }
+
+  @include media-breakpoint-up(lg) {
+    grid-template-areas:
+      "sidebar intro toc"
+      "sidebar content toc";
+    grid-template-columns: 1fr 4fr 1fr;
+  }
+}
+
+.bd-sidebar {
+  grid-area: sidebar;
+}
+
+.bd-intro {
+  grid-area: intro;
+}
+
+.bd-toc {
+  grid-area: toc;
+}
+
+.bd-content {
+  grid-area: content;
+  min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
+}