diff --git a/README.md b/README.md
index 73eb86a..d23e009 100644
--- a/README.md
+++ b/README.md
@@ -18,13 +18,13 @@ The truth is that many enterprise projects can’t afford to drop support for br
 
 Requires [Node v8.2.0](https://nodejs.org/en/) or higher, which includes npm and npx.
 
-1. Create a file called `css-gridish.json` in your project root. See the [config documentation](#config-file) or an [example config](./examples/material/css-gridish.json) for help.
-2. Determine how you want your grid built:
-   * If you want to build once, run command `npx css-gridish`.
-   * If you want to add the grid building to your project’s build process:
-     1. Run command `npm install css-gridish`.
-     2. Add `scripts: {build: "css-gridish"}` in your `package.json`.
-     3. Run command `npm run build`.
+1.  Create a file called `css-gridish.json` in your project root. See the [config documentation](#config-file) or an [example config](./examples/material/css-gridish.json) for help.
+2.  Determine how you want your grid built:
+    * If you want to build once, run command `npx css-gridish`.
+    * If you want to add the grid building to your project’s build process:
+      1.  Run command `npm install css-gridish`.
+      2.  Add `scripts: {build: "css-gridish"}` in your `package.json`.
+      3.  Run command `npm run build`.
 
 Your CSS and `README.md` with class documentation will be built into `./css-gridish/`.
 
@@ -92,7 +92,7 @@ $extraBreakpoints: (
 
 ### Transitioning from Legacy
 
-Once your experience can drop support for browsers like IE 11 and Edge <15, you can simply remove all legacy classes and switch over to the non-legacy files. This is a great progressive-enhancement for your performance when it happens.
+Once your experience can drop support for browsers like IE 11 and Edge <15, you can simply switch over to the non-legacy files. This is a great progressive-enhancement for your performance when it happens. A minimal file is also included for when you use native CSS Grid rules instead of our column and row classes.
 
 ## Future Updates
 
@@ -105,18 +105,22 @@ Once your experience can drop support for browsers like IE 11 and Edge <15, you
 
 A lot of times, you will want an item to break out of the gutters for background color, to extend media, or for another reason. Until the CSS Grid spec has a way to ignore that gutter, we use the padding classes (`.yourGrid-padding`) to opt-in to respecting the gutter. The padding classes are always half the size of a gutter for alignment.
 
-### Why are columns using vw units and sometimes the calc function?
+### Why is the legacy version using Flexbox instead of the `-ms` prefix use of CSS Grid?
 
-Until Edge and Safari support
-[`display: subgrid`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility),
-it will be difficult for you to write semantic HTML with CSS Grid Layout. We are
-able to take advantage of vw units and the calc function so you can embed your
-`.yourPrefix-grid` class inside of itself as much that is needed for you.
+The biggest reason is due to the lack of auto-placement when using that prefix. See more details about difference in the `-ms` prefix in [this blog post.](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/)
 
-### Why are there no row classes for the legacy implementation?
+### Why are there no grouping row classes needed?
 
 Thanks to flexbox’s wrapping functionality, nodes that specify rows are not necessary. Only create a node for a row if it has semantic or accessibility significance. You can keep embedding `.yourPrefix-grid` as necessary to accomplish this.
 
-### What happens in the legacy implementation if I specify the column width for one breakpoint, but not the next larger breakpoint?
+### What happens if I specify the column class for one breakpoint, but not the column class for the next breakpoint?
 
 To maintain a mobile-first opinion, column widths will scale to the next breakpoint if not specified. This means that a `.yourPrefix__col--sm--3` (with 6 total columns) would automatically grow into a `.yourPrefix__col--md--6` (with 12 total columns) if no `md` class was declared to maintain half of the screen size.
+
+### Why are columns using vw units and sometimes the calc function?
+
+Until Edge and Safari support
+[`display: subgrid`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility),
+it will be difficult for you to write semantic HTML with CSS Grid Layout. We are
+able to take advantage of vw units and the calc function so you can embed your
+`.yourPrefix-grid` class inside of itself as much that is needed for you.
diff --git a/examples/bootstrap/css-gridish/README.md b/examples/bootstrap/css-gridish/README.md
index b25bc0e..1a4c39c 100755
--- a/examples/bootstrap/css-gridish/README.md
+++ b/examples/bootstrap/css-gridish/README.md
@@ -4,12 +4,12 @@ An example of [CSS Gridish](../../../README.md) generating CSS Grid code, fallba
 
 This grid was bootstrapped using [CSS Gridish](https://github.com/ibm/css-gridish). It includes:
 - CSS Grid Layout code with a Flexbox fallback in CSS and SCSS
-- Sketch file with artboards
+- Sketch design file with artboards
 - Config file (`css-gridish.json`) to review webpages with the [CSS Gridish Chrome Extension](https://chrome.google.com/webstore/detail/css-gridish/ebhcneoilkamaddhlphlehojpcooobgc)
 
 ## Sketch Artboards and Chrome Extension
 
-The Sketch file can be found above in the list of files titled `bootstrap-grid.sketch`. It includes both grid (CTRL+G) and layout (CTRL+L) settings.
+The Sketch design file can be found above in the list of files titled `bootstrap-grid.sketch`. It includes both grid (CTRL+G) and layout (CTRL+L) settings.
 
 The Chrome extension uses the same shortcuts. To set the extension up:
 
@@ -17,21 +17,21 @@ The Chrome extension uses the same shortcuts. To set the extension up:
 2. Download the `css-gridish.json` file in this project
 3. Open the CSS Gridish menu in your Chrome toolbar and upload your `css-gridish.json` file
 
-## Legacy Support
+## Files
 
-If you have no need to support browsers like IE 11 and Edge <15, please use `css/bootstrap-grid.min.css`. This will omit the CSS Flexbox fallback from your code.
+There are three CSS files to choose from based on what browser support you want and whether you will use native CSS Grid rules or our provided classes:
 
-If you are supporting browsers that lack [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), you can use `css/bootstrap-grid-legacy.min.css` and the legacy classes below. With the legacy file, the browsers that do not support the final CSS Grid Legacy spec will fallback to a flexbox alternative. The flexbox alternative supports embedded subgrids that still reflect the overall grid system’s column structure.
+| Filename | When to Use |
+| ---------- | ----------------- |
+| `css/bootstrap-grid-legacy.min.css` | To also support browsers that do not have [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility) (IE 11 and Edge <15) with a reliable Flexbox fallback |
+| `css/bootstrap-grid.min.css` | To only support browsers with [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility) |
+| `css/bootstrap-grid-minimal.min.css` | To only support browsers with [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), but not use any generated column or height classes |
 
-### Transitioning from Legacy
-
-Once your experience can drop support for IE 11 and Edge <15, you can simply remove all legacy classes and switch over to `css/bootstrap-grid.min.css`.
+There is also an optional JavaScript file included at `js/bootstrap-grid.js`. This will adjust the grid to not go behind browser scrollbars since different browsers handle the `vw` unit differently. It applies to any browser that supports [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility) and [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#Browser_compatibility).
 
 ## Breakpoints
 
-There are currently 2 breakpoints where the design specs change for our
-grid. The great thing about CSS Grid Layout is that you can rearrange your
-layout at any custom breakpoint between those:
+A breakpoint is where the number of columns or another value changes using a media query. There are currently 2 breakpoints where the design specs change for our grid. The great thing about CSS Grid Layout is that you can rearrange your layout at any custom breakpoint between those:
 
 | Breakpoint | Number of Columns | Width    | Value  |
 | ---------- | ----------------- | ------- | ------ |
@@ -60,28 +60,35 @@ The example above will create all legacy classes for your custom breakpoints lik
 
 If you are new to CSS Grid, please try [learning the basics](https://www.google.com/search?q=css+grid+tutorials&oq=css+grid+tutorials) before using this. For the most part, you will only have to use `grid-column` and `grid-row` with the following classes:
 
-| Class Name                                | Purpose                                                                                    |
-| ----------------------------------------- | ------------------------------------------------------------------------------------------ |
-| `.bootstrap-container`                          | Container element of whole page for proper margin and max-width (can be used on body tag ) |
-| `.bootstrap-container--[left, right]`            | Align the container element to the left or right side                                      |
-| `.bootstrap-container__bleed--[sm]`                         | Extend the background color of a container child into the container margin on both sides starting at a specific breakpoint (CSS Grid browsers only)        |
-| `.bootstrap-container__bleed--[sm]--[left, right]`           | Extend the background color of a grid into the container margin on one side at a specific breakpoint (CSS Grid browsers only)           |
-| `.bootstrap-container__break--[sm]`                         | Child of container element should ignore grid’s margin at a specific breakpoint (CSS Grid browsers only)       |
-| `.bootstrap-container__break--[sm]--[left, right]`           | Child of container element should ignore grid’s margin on one side at a specific breakpoint (CSS Grid browsers only)                             |
-| `.bootstrap-grid`                               | Use anytime you want to apply CSS Grid Layout, including as embedded subgrids              |
-| `.bootstrap-grid--fixed-columns`                         | Switch grid’s column widths to fixed instead of fluid                                       |
-| `.bootstrap-grid--fluid-rows`                         | Switch grid’s row height to match the width of a column                                        |
-| `.bootstrap-padding`                            | Add one unit of padding to element on all sides                                            |
-| `.bootstrap-padding--[bottom, left, right, top]` | Add one unit of padding to element on one side                                             |
-| `.bootstrap-padding--[horizontal, vertical]`     | Add one unit of padding to element on two sides                                            |
-| `.bootstrap-grid__col--sm--[1-12]`                          | Set the width out of 12 columns for an item in the grid starting at the sm breakpoint |
-| `.bootstrap-grid__col--[sm]--0`                          | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified |
-| `.bootstrap-grid__col--[sm]--0--only`                          | Do not display item only at specific breakpoint |
-| `.bootstrap-grid__height--[sm]--[1-30]`                          | Set the min-height based on an interval of 15px for an item starting at the breakpoint specified |
-| `.bootstrap-grid__height--[sm]--0`                          | Reset the min-height for an item starting at the specified breakpoint |
+| Class Name | Purpose | Child? |
+| ---------- | ------- | ------ |
+| `.bootstrap-container` | Container element of whole page for proper margin and max-width (can be used on body tag). You need to use `.bootstrap-grid` on this same element. | No |
+| `.bootstrap-container--[left, right]` | Align the container element to the left or right side | |
+| `.bootstrap-container__bleed--[sm]` | Extend the background color of a container child into the container margin on both sides starting at a specific breakpoint (CSS Grid browsers only) | Child of `.bootstrap-container` |
+| `.bootstrap-container__bleed--[sm]--[left, right]` | Extend the background color of a grid into the container margin on one side at a specific breakpoint (CSS Grid browsers only) | Child of `.bootstrap-container` |
+| `.bootstrap-container__break--[sm]` |Ignore container’s margin at a specific breakpoint (CSS Grid browsers only) | Child of `.bootstrap-container` |
+| `.bootstrap-container__break--[sm]--[left, right]` | Ignore container’s margin on one side at a specific breakpoint (CSS Grid browsers only) | Child of `.bootstrap-container` |
+| `.bootstrap-grid` | Use anytime you want to apply CSS Grid Layout, including as embedded subgrids | Peer of `.bootstrap-container` or direct child of another `.bootstrap-grid` |
+| `.bootstrap-grid--fixed-columns` | Switch grid’s column widths to fixed instead of fluid | |
+| `.bootstrap-grid--fluid-rows` | Switch grid’s row height to match the width of a column | |
+| `.bootstrap-padding` | Add one unit of padding to element on all sides | Child of `.bootstrap-grid` |
+| `.bootstrap-padding--[bottom, left, right, top]` | Add one unit of padding to element on one side | Child of `.bootstrap-grid` |
+| `.bootstrap-padding--[horizontal, vertical]` | Add one unit of padding to element on two sides | Child of `.bootstrap-grid` |
 
 By default, the grid code uses fluid columns and fixed rows. You can switch both aspects with `.bootstrap-grid--fixed-columns` and `.bootstrap-grid--fluid-rows`. When switching to fluid rows, the rows will scale across breakpoints just like `col` classes and only supports quantities up to the amount of columns in that breakpoint.
 
+## Optional Classes
+
+The following classes are included in `css/bootstrap-grid.min.css` and `css/bootstrap-grid-legacy.min.css`. For the minimal file, you would instead use native CSS Grid rules as needed.
+
+| Class Name | Purpose | Child? |
+| ---------- | ------- | ------ |
+| `.bootstrap-grid__col--sm--[1-12]` | Set the width out of 12 columns for an item in the grid starting at the sm breakpoint | Child of `.bootstrap-grid` |
+| `.bootstrap-grid__col--[sm]--0` | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified | Child of `.bootstrap-grid` |
+| `.bootstrap-grid__col--[sm]--0--only` | Do not display item only at specific breakpoint | Child of `.bootstrap-grid` |
+| `.bootstrap-grid__height--[sm]--[1-30]` | Set the min-height based on an interval of 15px for an item starting at the breakpoint specified | Child of `.bootstrap-grid` |
+| `.bootstrap-grid__height--[sm]--0` | Reset the min-height for an item starting at the specified breakpoint | Child of `.bootstrap-grid` |
+
 If you follow the instructions above for custom breakpoints, all of the `col` and `height` classes will generate with a version for each custom breakpoint too. For example, adding the custom breakpoint of `whateversize` will create `.bootstrap-grid__col--whateversize--1`. Since that custom breakpoint is right after the previous breakpoint, it will have the same amount of columns and min-height.
 
 ## Variables
@@ -184,22 +191,22 @@ button {
 
 A lot of times, you will want an item to break out of the gutters for background color, to extend media, or for another reason. Until the CSS Grid spec has a way to ignore that gutter, we use the padding classes (`.bootstrap-padding`) to opt-in to respecting the gutter. The padding classes are always half the size of a gutter for alignment.
 
-### Why is the fallback using flexbox instead of the `-ms` prefix use of CSS Grid?
+### Why is the legacy version using Flexbox instead of the `-ms` prefix use of CSS Grid?
 
 The biggest reason is due to the lack of auto-placement when using that prefix. See more details about difference in the `-ms` prefix in [this blog post.](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/)
 
+### Why are there no grouping row classes needed?
+
+Thanks to flexbox’s wrapping functionality, nodes that specify rows are not necessary. Only create a node for a row if it has semantic or accessibility significance. You can keep embedding `.bootstrap-grid` as necessary to accomplish this.
+
+### What happens if I specify the column class for one breakpoint, but not the column class for the next breakpoint?
+
+To maintain a mobile-first opinion, column widths will scale to the next breakpoint if not specified. This means that a `.bootstrap-grid__col--sm--1` be the size of `.bootstrap-grid__col----2` if no `` class was declared.
+
 ### Why are columns using vw units and sometimes the calc function?
 
 Until Edge and Safari support
 [`display: subgrid`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility),
 it is difficult for you to write semantic HTML with CSS Grid Layout. We are
 able to take advantage of vw units and the calc function so you can embed 
-`.bootstrap-grid` elements inside of each other and still respect the overall grid design.
-
-### Why are there no grouping row classes needed?
-
-Thanks to flexbox’s wrapping functionality, nodes that specify rows are not necessary. Only create a node for a row if it has semantic or accessibility significance. You can keep embedding `.bootstrap-grid` as necessary to accomplish this.
-
-### What happens in the legacy implementation if I specify the column width for one breakpoint, but not the next larger breakpoint?
-
-To maintain a mobile-first opinion, column widths will scale to the next breakpoint if not specified. This means that a `.bootstrap-grid__col--sm--1` be the size of `.bootstrap-grid__col----2` if no `` class was declared.
\ No newline at end of file
+`.bootstrap-grid` elements inside of each other and still respect the overall grid design.
\ No newline at end of file
diff --git a/examples/bootstrap/css-gridish/bootstrap-grid.sketch b/examples/bootstrap/css-gridish/bootstrap-grid.sketch
index f27676d..8a34ffc 100644
Binary files a/examples/bootstrap/css-gridish/bootstrap-grid.sketch and b/examples/bootstrap/css-gridish/bootstrap-grid.sketch differ
diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css b/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css
index 9a0686a..8e72b63 100755
--- a/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css
+++ b/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css
@@ -10,6 +10,7 @@ body {
   margin-right: auto;
   max-width: 100rem;
   overflow-x: hidden;
+  padding-right: var(--scrollbar-width);
   width: 100vw; }
 
 .bootstrap-container--left {
@@ -48,37 +49,39 @@ body {
   .bootstrap-grid > * {
     height: 100%; } }
 
-@supports (display: grid) {
-  :root {
-    --bootstrap-height-1: 1rem;
-    --bootstrap-height-2: 2rem;
-    --bootstrap-height-3: 3rem;
-    --bootstrap-height-4: 4rem;
-    --bootstrap-height-5: 5rem;
-    --bootstrap-height-6: 6rem;
-    --bootstrap-height-7: 7rem;
-    --bootstrap-height-8: 8rem;
-    --bootstrap-height-9: 9rem;
-    --bootstrap-height-10: 10rem;
-    --bootstrap-height-11: 11rem;
-    --bootstrap-height-12: 12rem;
-    --bootstrap-height-13: 13rem;
-    --bootstrap-height-14: 14rem;
-    --bootstrap-height-15: 15rem;
-    --bootstrap-height-16: 16rem;
-    --bootstrap-height-17: 17rem;
-    --bootstrap-height-18: 18rem;
-    --bootstrap-height-19: 19rem;
-    --bootstrap-height-20: 20rem;
-    --bootstrap-height-21: 21rem;
-    --bootstrap-height-22: 22rem;
-    --bootstrap-height-23: 23rem;
-    --bootstrap-height-24: 24rem;
-    --bootstrap-height-25: 25rem;
-    --bootstrap-height-26: 26rem;
-    --bootstrap-height-27: 27rem;
-    --bootstrap-height-28: 28rem;
-    --bootstrap-height-29: 29rem; } }
+:root {
+  --scrollbar-width: 0px; }
+  @supports (display: grid) {
+    :root {
+      --bootstrap-height-1: 1rem;
+      --bootstrap-height-2: 2rem;
+      --bootstrap-height-3: 3rem;
+      --bootstrap-height-4: 4rem;
+      --bootstrap-height-5: 5rem;
+      --bootstrap-height-6: 6rem;
+      --bootstrap-height-7: 7rem;
+      --bootstrap-height-8: 8rem;
+      --bootstrap-height-9: 9rem;
+      --bootstrap-height-10: 10rem;
+      --bootstrap-height-11: 11rem;
+      --bootstrap-height-12: 12rem;
+      --bootstrap-height-13: 13rem;
+      --bootstrap-height-14: 14rem;
+      --bootstrap-height-15: 15rem;
+      --bootstrap-height-16: 16rem;
+      --bootstrap-height-17: 17rem;
+      --bootstrap-height-18: 18rem;
+      --bootstrap-height-19: 19rem;
+      --bootstrap-height-20: 20rem;
+      --bootstrap-height-21: 21rem;
+      --bootstrap-height-22: 22rem;
+      --bootstrap-height-23: 23rem;
+      --bootstrap-height-24: 24rem;
+      --bootstrap-height-25: 25rem;
+      --bootstrap-height-26: 26rem;
+      --bootstrap-height-27: 27rem;
+      --bootstrap-height-28: 28rem;
+      --bootstrap-height-29: 29rem; } }
 
 .bootstrap-grid__height--sm--0 {
   height: 0;
@@ -261,17 +264,21 @@ body {
 
 .bootstrap-grid {
   grid-auto-rows: minmax(1rem, min-content);
-  grid-template-columns: repeat(auto-fill, 8.33vw); }
+  grid-template-columns: repeat(auto-fill, 8.33vw);
+  grid-template-columns: repeat(auto-fill, calc((100vw - var(--scrollbar-width))* 0.0833)); }
   .bootstrap-grid.bootstrap-grid--fixed-columns {
     grid-template-columns: repeat(auto-fill, 3rem); }
   .bootstrap-grid.bootstrap-grid--fluid-rows {
-    grid-auto-rows: 8.33vw; }
+    grid-auto-rows: 8.33vw;
+    grid-auto-rows: calc((100vw - var(--scrollbar-width))* 0.0833); }
   .bootstrap-grid > * {
     grid-column: span 12; }
 
 .bootstrap-grid__col--sm--1 {
   max-width: 8.33rem;
+  max-width: calc((100rem - var(--scrollbar-width))* 0.0833);
   width: 8.33vw;
+  width: calc((100vw - var(--scrollbar-width))* 0.0833);
   grid-column: span 1; }
   .bootstrap-grid__col--sm--1.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) {
     grid-column: span 1; }
@@ -280,12 +287,17 @@ body {
 > .bootstrap-grid__height--sm--1 {
   grid-row: span 1;
   height: 8.33vw;
+  height: calc((100vw - var(--scrollbar-width))* 0.0833);
   min-height: 8.33vw;
-  max-height: 8.33rem; }
+  min-height: calc((100vw - var(--scrollbar-width))* 0.0833);
+  max-height: 8.33rem;
+  max-height: calc((100rem - var(--scrollbar-width))* 0.0833); }
 
 .bootstrap-grid__col--sm--2 {
   max-width: 16.66rem;
+  max-width: calc((100rem - var(--scrollbar-width))* 0.1666);
   width: 16.66vw;
+  width: calc((100vw - var(--scrollbar-width))* 0.1666);
   grid-column: span 2; }
   .bootstrap-grid__col--sm--2.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) {
     grid-column: span 2; }
@@ -294,12 +306,17 @@ body {
 > .bootstrap-grid__height--sm--2 {
   grid-row: span 2;
   height: 16.66vw;
+  height: calc((100vw - var(--scrollbar-width))* 0.1666);
   min-height: 16.66vw;
-  max-height: 16.66rem; }
+  min-height: calc((100vw - var(--scrollbar-width))* 0.1666);
+  max-height: 16.66rem;
+  max-height: calc((100rem - var(--scrollbar-width))* 0.1666); }
 
 .bootstrap-grid__col--sm--3 {
   max-width: 25rem;
+  max-width: calc((100rem - var(--scrollbar-width))* 0.25);
   width: 25vw;
+  width: calc((100vw - var(--scrollbar-width))* 0.25);
   grid-column: span 3; }
   .bootstrap-grid__col--sm--3.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) {
     grid-column: span 3; }
@@ -308,12 +325,17 @@ body {
 > .bootstrap-grid__height--sm--3 {
   grid-row: span 3;
   height: 25vw;
+  height: calc((100vw - var(--scrollbar-width))* 0.25);
   min-height: 25vw;
-  max-height: 25rem; }
+  min-height: calc((100vw - var(--scrollbar-width))* 0.25);
+  max-height: 25rem;
+  max-height: calc((100rem - var(--scrollbar-width))* 0.25); }
 
 .bootstrap-grid__col--sm--4 {
   max-width: 33.33rem;
+  max-width: calc((100rem - var(--scrollbar-width))* 0.3333);
   width: 33.33vw;
+  width: calc((100vw - var(--scrollbar-width))* 0.3333);
   grid-column: span 4; }
   .bootstrap-grid__col--sm--4.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) {
     grid-column: span 4; }
@@ -322,12 +344,17 @@ body {
 > .bootstrap-grid__height--sm--4 {
   grid-row: span 4;
   height: 33.33vw;
+  height: calc((100vw - var(--scrollbar-width))* 0.3333);
   min-height: 33.33vw;
-  max-height: 33.33rem; }
+  min-height: calc((100vw - var(--scrollbar-width))* 0.3333);
+  max-height: 33.33rem;
+  max-height: calc((100rem - var(--scrollbar-width))* 0.3333); }
 
 .bootstrap-grid__col--sm--5 {
   max-width: 41.66rem;
+  max-width: calc((100rem - var(--scrollbar-width))* 0.4166);
   width: 41.66vw;
+  width: calc((100vw - var(--scrollbar-width))* 0.4166);
   grid-column: span 5; }
   .bootstrap-grid__col--sm--5.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) {
     grid-column: span 5; }
@@ -336,12 +363,17 @@ body {
 > .bootstrap-grid__height--sm--5 {
   grid-row: span 5;
   height: 41.66vw;
+  height: calc((100vw - var(--scrollbar-width))* 0.4166);
   min-height: 41.66vw;
-  max-height: 41.66rem; }
+  min-height: calc((100vw - var(--scrollbar-width))* 0.4166);
+  max-height: 41.66rem;
+  max-height: calc((100rem - var(--scrollbar-width))* 0.4166); }
 
 .bootstrap-grid__col--sm--6 {
   max-width: 50rem;
+  max-width: calc((100rem - var(--scrollbar-width))* 0.5);
   width: 50vw;
+  width: calc((100vw - var(--scrollbar-width))* 0.5);
   grid-column: span 6; }
   .bootstrap-grid__col--sm--6.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) {
     grid-column: span 6; }
@@ -350,12 +382,17 @@ body {
 > .bootstrap-grid__height--sm--6 {
   grid-row: span 6;
   height: 50vw;
+  height: calc((100vw - var(--scrollbar-width))* 0.5);
   min-height: 50vw;
-  max-height: 50rem; }
+  min-height: calc((100vw - var(--scrollbar-width))* 0.5);
+  max-height: 50rem;
+  max-height: calc((100rem - var(--scrollbar-width))* 0.5); }
 
 .bootstrap-grid__col--sm--7 {
   max-width: 58.33rem;
+  max-width: calc((100rem - var(--scrollbar-width))* 0.5833);
   width: 58.33vw;
+  width: calc((100vw - var(--scrollbar-width))* 0.5833);
   grid-column: span 7; }
   .bootstrap-grid__col--sm--7.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) {
     grid-column: span 7; }
@@ -364,12 +401,17 @@ body {
 > .bootstrap-grid__height--sm--7 {
   grid-row: span 7;
   height: 58.33vw;
+  height: calc((100vw - var(--scrollbar-width))* 0.5833);
   min-height: 58.33vw;
-  max-height: 58.33rem; }
+  min-height: calc((100vw - var(--scrollbar-width))* 0.5833);
+  max-height: 58.33rem;
+  max-height: calc((100rem - var(--scrollbar-width))* 0.5833); }
 
 .bootstrap-grid__col--sm--8 {
   max-width: 66.66rem;
+  max-width: calc((100rem - var(--scrollbar-width))* 0.6666);
   width: 66.66vw;
+  width: calc((100vw - var(--scrollbar-width))* 0.6666);
   grid-column: span 8; }
   .bootstrap-grid__col--sm--8.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) {
     grid-column: span 8; }
@@ -378,12 +420,17 @@ body {
 > .bootstrap-grid__height--sm--8 {
   grid-row: span 8;
   height: 66.66vw;
+  height: calc((100vw - var(--scrollbar-width))* 0.6666);
   min-height: 66.66vw;
-  max-height: 66.66rem; }
+  min-height: calc((100vw - var(--scrollbar-width))* 0.6666);
+  max-height: 66.66rem;
+  max-height: calc((100rem - var(--scrollbar-width))* 0.6666); }
 
 .bootstrap-grid__col--sm--9 {
   max-width: 75rem;
+  max-width: calc((100rem - var(--scrollbar-width))* 0.75);
   width: 75vw;
+  width: calc((100vw - var(--scrollbar-width))* 0.75);
   grid-column: span 9; }
   .bootstrap-grid__col--sm--9.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) {
     grid-column: span 9; }
@@ -392,12 +439,17 @@ body {
 > .bootstrap-grid__height--sm--9 {
   grid-row: span 9;
   height: 75vw;
+  height: calc((100vw - var(--scrollbar-width))* 0.75);
   min-height: 75vw;
-  max-height: 75rem; }
+  min-height: calc((100vw - var(--scrollbar-width))* 0.75);
+  max-height: 75rem;
+  max-height: calc((100rem - var(--scrollbar-width))* 0.75); }
 
 .bootstrap-grid__col--sm--10 {
   max-width: 83.33rem;
+  max-width: calc((100rem - var(--scrollbar-width))* 0.8333);
   width: 83.33vw;
+  width: calc((100vw - var(--scrollbar-width))* 0.8333);
   grid-column: span 10; }
   .bootstrap-grid__col--sm--10.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) {
     grid-column: span 10; }
@@ -406,12 +458,17 @@ body {
 > .bootstrap-grid__height--sm--10 {
   grid-row: span 10;
   height: 83.33vw;
+  height: calc((100vw - var(--scrollbar-width))* 0.8333);
   min-height: 83.33vw;
-  max-height: 83.33rem; }
+  min-height: calc((100vw - var(--scrollbar-width))* 0.8333);
+  max-height: 83.33rem;
+  max-height: calc((100rem - var(--scrollbar-width))* 0.8333); }
 
 .bootstrap-grid__col--sm--11 {
   max-width: 91.66rem;
+  max-width: calc((100rem - var(--scrollbar-width))* 0.9166);
   width: 91.66vw;
+  width: calc((100vw - var(--scrollbar-width))* 0.9166);
   grid-column: span 11; }
   .bootstrap-grid__col--sm--11.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) {
     grid-column: span 11; }
@@ -420,12 +477,17 @@ body {
 > .bootstrap-grid__height--sm--11 {
   grid-row: span 11;
   height: 91.66vw;
+  height: calc((100vw - var(--scrollbar-width))* 0.9166);
   min-height: 91.66vw;
-  max-height: 91.66rem; }
+  min-height: calc((100vw - var(--scrollbar-width))* 0.9166);
+  max-height: 91.66rem;
+  max-height: calc((100rem - var(--scrollbar-width))* 0.9166); }
 
 .bootstrap-grid__col--sm--12 {
   max-width: 100rem;
+  max-width: calc((100rem - var(--scrollbar-width))* 1);
   width: 100vw;
+  width: calc((100vw - var(--scrollbar-width))* 1);
   grid-column: span 12; }
   .bootstrap-grid__col--sm--12.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) {
     grid-column: span 12; }
@@ -434,8 +496,11 @@ body {
 > .bootstrap-grid__height--sm--12 {
   grid-row: span 12;
   height: 100vw;
+  height: calc((100vw - var(--scrollbar-width))* 1);
   min-height: 100vw;
-  max-height: 100rem; }
+  min-height: calc((100vw - var(--scrollbar-width))* 1);
+  max-height: 100rem;
+  max-height: calc((100rem - var(--scrollbar-width))* 1); }
 
 @media screen and (min-width: 100rem) {
   .bootstrap-grid__col--sm--0--only {
@@ -462,11 +527,13 @@ body {
     padding-bottom: 15px;
     padding-top: 15px; }
   .bootstrap-grid {
-    grid-template-columns: repeat(auto-fill, 8.33rem); }
+    grid-template-columns: repeat(auto-fill, 8.33rem);
+    grid-template-columns: repeat(auto-fill, calc((100rem - var(--scrollbar-width))* 0.0833)); }
     .bootstrap-grid.bootstrap-grid--fixed-columns {
       grid-template-columns: repeat(auto-fill, 8.33333rem); }
     .bootstrap-grid.bootstrap-grid--fluid-rows {
-      grid-auto-rows: 8.33rem; }
+      grid-auto-rows: 8.33rem;
+      grid-auto-rows: calc((100rem - var(--scrollbar-width))* 0.0833); }
   [class*="bootstrap-grid__col--"] {
     min-width: 0; } }
 
diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.min.css b/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.min.css
index f35d27e..687124f 100755
--- a/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.min.css
+++ b/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.min.css
@@ -1 +1 @@
-html{font-size:15px}body{margin:0}.bootstrap-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;width:100vw}.bootstrap-container--left{margin-left:0}.bootstrap-container--right{margin-right:0}.bootstrap-grid{align-items:flex-start;box-sizing:border-box;display:flex;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(1rem,min-content);grid-template-columns:repeat(auto-fill,8.33vw)}.bootstrap-grid>*{box-sizing:border-box;width:100%;grid-column:span 12}.bootstrap-grid>* :last-child,.bootstrap-grid>* :last-child>:last-child,.bootstrap-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bootstrap-padding]{box-sizing:border-box}@supports (display:grid){.bootstrap-grid{align-items:unset}.bootstrap-grid>*{width:initial;height:100%}:root{--bootstrap-height-1:1rem;--bootstrap-height-2:2rem;--bootstrap-height-3:3rem;--bootstrap-height-4:4rem;--bootstrap-height-5:5rem;--bootstrap-height-6:6rem;--bootstrap-height-7:7rem;--bootstrap-height-8:8rem;--bootstrap-height-9:9rem;--bootstrap-height-10:10rem;--bootstrap-height-11:11rem;--bootstrap-height-12:12rem;--bootstrap-height-13:13rem;--bootstrap-height-14:14rem;--bootstrap-height-15:15rem;--bootstrap-height-16:16rem;--bootstrap-height-17:17rem;--bootstrap-height-18:18rem;--bootstrap-height-19:19rem;--bootstrap-height-20:20rem;--bootstrap-height-21:21rem;--bootstrap-height-22:22rem;--bootstrap-height-23:23rem;--bootstrap-height-24:24rem;--bootstrap-height-25:25rem;--bootstrap-height-26:26rem;--bootstrap-height-27:27rem;--bootstrap-height-28:28rem;--bootstrap-height-29:29rem}}.bootstrap-grid__height--sm--0{height:0;min-height:0}.bootstrap-grid__height--sm--1{grid-row:span 1;height:1rem;min-height:1rem}.bootstrap-grid__height--sm--2{grid-row:span 2;height:2rem;min-height:2rem}.bootstrap-grid__height--sm--3{grid-row:span 3;height:3rem;min-height:3rem}.bootstrap-grid__height--sm--4{grid-row:span 4;height:4rem;min-height:4rem}.bootstrap-grid__height--sm--5{grid-row:span 5;height:5rem;min-height:5rem}.bootstrap-grid__height--sm--6{grid-row:span 6;height:6rem;min-height:6rem}.bootstrap-grid__height--sm--7{grid-row:span 7;height:7rem;min-height:7rem}.bootstrap-grid__height--sm--8{grid-row:span 8;height:8rem;min-height:8rem}.bootstrap-grid__height--sm--9{grid-row:span 9;height:9rem;min-height:9rem}.bootstrap-grid__height--sm--10{grid-row:span 10;height:10rem;min-height:10rem}.bootstrap-grid__height--sm--11{grid-row:span 11;height:11rem;min-height:11rem}.bootstrap-grid__height--sm--12{grid-row:span 12;height:12rem;min-height:12rem}.bootstrap-grid__height--sm--13{grid-row:span 13;height:13rem;min-height:13rem}.bootstrap-grid__height--sm--14{grid-row:span 14;height:14rem;min-height:14rem}.bootstrap-grid__height--sm--15{grid-row:span 15;height:15rem;min-height:15rem}.bootstrap-grid__height--sm--16{grid-row:span 16;height:16rem;min-height:16rem}.bootstrap-grid__height--sm--17{grid-row:span 17;height:17rem;min-height:17rem}.bootstrap-grid__height--sm--18{grid-row:span 18;height:18rem;min-height:18rem}.bootstrap-grid__height--sm--19{grid-row:span 19;height:19rem;min-height:19rem}.bootstrap-grid__height--sm--20{grid-row:span 20;height:20rem;min-height:20rem}.bootstrap-grid__height--sm--21{grid-row:span 21;height:21rem;min-height:21rem}.bootstrap-grid__height--sm--22{grid-row:span 22;height:22rem;min-height:22rem}.bootstrap-grid__height--sm--23{grid-row:span 23;height:23rem;min-height:23rem}.bootstrap-grid__height--sm--24{grid-row:span 24;height:24rem;min-height:24rem}.bootstrap-grid__height--sm--25{grid-row:span 25;height:25rem;min-height:25rem}.bootstrap-grid__height--sm--26{grid-row:span 26;height:26rem;min-height:26rem}.bootstrap-grid__height--sm--27{grid-row:span 27;height:27rem;min-height:27rem}.bootstrap-grid__height--sm--28{grid-row:span 28;height:28rem;min-height:28rem}.bootstrap-grid__height--sm--29{grid-row:span 29;height:29rem;min-height:29rem}[class*=bootstrap-grid__col--sm--]{display:block}.bootstrap-grid__col--sm--0,.bootstrap-grid__col--sm--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,3rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33vw}.bootstrap-grid__col--sm--1{max-width:8.33rem;width:8.33vw;grid-column:span 1}.bootstrap-grid__col--sm--1.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 1}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--1{grid-row:span 1;height:8.33vw;min-height:8.33vw;max-height:8.33rem}.bootstrap-grid__col--sm--2{max-width:16.66rem;width:16.66vw;grid-column:span 2}.bootstrap-grid__col--sm--2.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 2}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--2{grid-row:span 2;height:16.66vw;min-height:16.66vw;max-height:16.66rem}.bootstrap-grid__col--sm--3{max-width:25rem;width:25vw;grid-column:span 3}.bootstrap-grid__col--sm--3.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 3}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--3{grid-row:span 3;height:25vw;min-height:25vw;max-height:25rem}.bootstrap-grid__col--sm--4{max-width:33.33rem;width:33.33vw;grid-column:span 4}.bootstrap-grid__col--sm--4.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 4}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--4{grid-row:span 4;height:33.33vw;min-height:33.33vw;max-height:33.33rem}.bootstrap-grid__col--sm--5{max-width:41.66rem;width:41.66vw;grid-column:span 5}.bootstrap-grid__col--sm--5.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 5}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--5{grid-row:span 5;height:41.66vw;min-height:41.66vw;max-height:41.66rem}.bootstrap-grid__col--sm--6{max-width:50rem;width:50vw;grid-column:span 6}.bootstrap-grid__col--sm--6.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 6}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--6{grid-row:span 6;height:50vw;min-height:50vw;max-height:50rem}.bootstrap-grid__col--sm--7{max-width:58.33rem;width:58.33vw;grid-column:span 7}.bootstrap-grid__col--sm--7.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 7}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--7{grid-row:span 7;height:58.33vw;min-height:58.33vw;max-height:58.33rem}.bootstrap-grid__col--sm--8{max-width:66.66rem;width:66.66vw;grid-column:span 8}.bootstrap-grid__col--sm--8.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 8}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--8{grid-row:span 8;height:66.66vw;min-height:66.66vw;max-height:66.66rem}.bootstrap-grid__col--sm--9{max-width:75rem;width:75vw;grid-column:span 9}.bootstrap-grid__col--sm--9.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 9}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--9{grid-row:span 9;height:75vw;min-height:75vw;max-height:75rem}.bootstrap-grid__col--sm--10{max-width:83.33rem;width:83.33vw;grid-column:span 10}.bootstrap-grid__col--sm--10.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 10}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--10{grid-row:span 10;height:83.33vw;min-height:83.33vw;max-height:83.33rem}.bootstrap-grid__col--sm--11{max-width:91.66rem;width:91.66vw;grid-column:span 11}.bootstrap-grid__col--sm--11.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 11}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--11{grid-row:span 11;height:91.66vw;min-height:91.66vw;max-height:91.66rem}.bootstrap-grid__col--sm--12{max-width:100rem;width:100vw;grid-column:span 12}.bootstrap-grid__col--sm--12.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--12{grid-row:span 12;height:100vw;min-height:100vw;max-height:100rem}@media screen and (min-width:100rem){.bootstrap-grid__col--sm--0--only,[class*=bootstrap-grid__col--xl--]{display:block}.bootstrap-grid__col--xl--0,.bootstrap-grid__col--xl--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid{grid-template-columns:repeat(auto-fill,8.33rem)}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33rem}[class*=bootstrap-grid__col--]{min-width:0}}@supports (display:grid){.bootstrap-grid>*,.bootstrap-grid>[class*=bootstrap-grid__col--]{min-width:initial;max-width:initial;width:initial}.bootstrap-grid>.bootstrap-grid,.bootstrap-grid>[class*=bootstrap-grid__col--].bootstrap-grid{display:grid}.bootstrap-grid>[class*=bootstrap-grid__height--]{height:unset;max-height:unset;min-height:initial}}.bootstrap-grid>script{display:none}
\ No newline at end of file
+html{font-size:15px}body{margin:0}.bootstrap-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.bootstrap-container--left{margin-left:0}.bootstrap-container--right{margin-right:0}.bootstrap-grid{align-items:flex-start;box-sizing:border-box;display:flex;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(1rem,min-content);grid-template-columns:repeat(auto-fill,8.33vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .0833))}.bootstrap-grid>*{box-sizing:border-box;width:100%;grid-column:span 12}.bootstrap-grid>* :last-child,.bootstrap-grid>* :last-child>:last-child,.bootstrap-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bootstrap-padding]{box-sizing:border-box}:root{--scrollbar-width:0px}@supports (display:grid){.bootstrap-grid{align-items:unset}.bootstrap-grid>*{width:initial;height:100%}:root{--bootstrap-height-1:1rem;--bootstrap-height-2:2rem;--bootstrap-height-3:3rem;--bootstrap-height-4:4rem;--bootstrap-height-5:5rem;--bootstrap-height-6:6rem;--bootstrap-height-7:7rem;--bootstrap-height-8:8rem;--bootstrap-height-9:9rem;--bootstrap-height-10:10rem;--bootstrap-height-11:11rem;--bootstrap-height-12:12rem;--bootstrap-height-13:13rem;--bootstrap-height-14:14rem;--bootstrap-height-15:15rem;--bootstrap-height-16:16rem;--bootstrap-height-17:17rem;--bootstrap-height-18:18rem;--bootstrap-height-19:19rem;--bootstrap-height-20:20rem;--bootstrap-height-21:21rem;--bootstrap-height-22:22rem;--bootstrap-height-23:23rem;--bootstrap-height-24:24rem;--bootstrap-height-25:25rem;--bootstrap-height-26:26rem;--bootstrap-height-27:27rem;--bootstrap-height-28:28rem;--bootstrap-height-29:29rem}}.bootstrap-grid__height--sm--0{height:0;min-height:0}.bootstrap-grid__height--sm--1{grid-row:span 1;height:1rem;min-height:1rem}.bootstrap-grid__height--sm--2{grid-row:span 2;height:2rem;min-height:2rem}.bootstrap-grid__height--sm--3{grid-row:span 3;height:3rem;min-height:3rem}.bootstrap-grid__height--sm--4{grid-row:span 4;height:4rem;min-height:4rem}.bootstrap-grid__height--sm--5{grid-row:span 5;height:5rem;min-height:5rem}.bootstrap-grid__height--sm--6{grid-row:span 6;height:6rem;min-height:6rem}.bootstrap-grid__height--sm--7{grid-row:span 7;height:7rem;min-height:7rem}.bootstrap-grid__height--sm--8{grid-row:span 8;height:8rem;min-height:8rem}.bootstrap-grid__height--sm--9{grid-row:span 9;height:9rem;min-height:9rem}.bootstrap-grid__height--sm--10{grid-row:span 10;height:10rem;min-height:10rem}.bootstrap-grid__height--sm--11{grid-row:span 11;height:11rem;min-height:11rem}.bootstrap-grid__height--sm--12{grid-row:span 12;height:12rem;min-height:12rem}.bootstrap-grid__height--sm--13{grid-row:span 13;height:13rem;min-height:13rem}.bootstrap-grid__height--sm--14{grid-row:span 14;height:14rem;min-height:14rem}.bootstrap-grid__height--sm--15{grid-row:span 15;height:15rem;min-height:15rem}.bootstrap-grid__height--sm--16{grid-row:span 16;height:16rem;min-height:16rem}.bootstrap-grid__height--sm--17{grid-row:span 17;height:17rem;min-height:17rem}.bootstrap-grid__height--sm--18{grid-row:span 18;height:18rem;min-height:18rem}.bootstrap-grid__height--sm--19{grid-row:span 19;height:19rem;min-height:19rem}.bootstrap-grid__height--sm--20{grid-row:span 20;height:20rem;min-height:20rem}.bootstrap-grid__height--sm--21{grid-row:span 21;height:21rem;min-height:21rem}.bootstrap-grid__height--sm--22{grid-row:span 22;height:22rem;min-height:22rem}.bootstrap-grid__height--sm--23{grid-row:span 23;height:23rem;min-height:23rem}.bootstrap-grid__height--sm--24{grid-row:span 24;height:24rem;min-height:24rem}.bootstrap-grid__height--sm--25{grid-row:span 25;height:25rem;min-height:25rem}.bootstrap-grid__height--sm--26{grid-row:span 26;height:26rem;min-height:26rem}.bootstrap-grid__height--sm--27{grid-row:span 27;height:27rem;min-height:27rem}.bootstrap-grid__height--sm--28{grid-row:span 28;height:28rem;min-height:28rem}.bootstrap-grid__height--sm--29{grid-row:span 29;height:29rem;min-height:29rem}[class*=bootstrap-grid__col--sm--]{display:block}.bootstrap-grid__col--sm--0,.bootstrap-grid__col--sm--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,3rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .0833)}.bootstrap-grid__col--sm--1{max-width:8.33rem;max-width:calc((100rem - var(--scrollbar-width))* .0833);width:8.33vw;width:calc((100vw - var(--scrollbar-width))* .0833);grid-column:span 1}.bootstrap-grid__col--sm--1.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 1}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--1{grid-row:span 1;height:8.33vw;height:calc((100vw - var(--scrollbar-width))* .0833);min-height:8.33vw;min-height:calc((100vw - var(--scrollbar-width))* .0833);max-height:8.33rem;max-height:calc((100rem - var(--scrollbar-width))* .0833)}.bootstrap-grid__col--sm--2{max-width:16.66rem;max-width:calc((100rem - var(--scrollbar-width))* .1666);width:16.66vw;width:calc((100vw - var(--scrollbar-width))* .1666);grid-column:span 2}.bootstrap-grid__col--sm--2.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 2}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--2{grid-row:span 2;height:16.66vw;height:calc((100vw - var(--scrollbar-width))* .1666);min-height:16.66vw;min-height:calc((100vw - var(--scrollbar-width))* .1666);max-height:16.66rem;max-height:calc((100rem - var(--scrollbar-width))* .1666)}.bootstrap-grid__col--sm--3{max-width:25rem;max-width:calc((100rem - var(--scrollbar-width))* .25);width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 3}.bootstrap-grid__col--sm--3.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 3}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--3{grid-row:span 3;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25);max-height:25rem;max-height:calc((100rem - var(--scrollbar-width))* .25)}.bootstrap-grid__col--sm--4{max-width:33.33rem;max-width:calc((100rem - var(--scrollbar-width))* .3333);width:33.33vw;width:calc((100vw - var(--scrollbar-width))* .3333);grid-column:span 4}.bootstrap-grid__col--sm--4.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 4}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--4{grid-row:span 4;height:33.33vw;height:calc((100vw - var(--scrollbar-width))* .3333);min-height:33.33vw;min-height:calc((100vw - var(--scrollbar-width))* .3333);max-height:33.33rem;max-height:calc((100rem - var(--scrollbar-width))* .3333)}.bootstrap-grid__col--sm--5{max-width:41.66rem;max-width:calc((100rem - var(--scrollbar-width))* .4166);width:41.66vw;width:calc((100vw - var(--scrollbar-width))* .4166);grid-column:span 5}.bootstrap-grid__col--sm--5.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 5}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--5{grid-row:span 5;height:41.66vw;height:calc((100vw - var(--scrollbar-width))* .4166);min-height:41.66vw;min-height:calc((100vw - var(--scrollbar-width))* .4166);max-height:41.66rem;max-height:calc((100rem - var(--scrollbar-width))* .4166)}.bootstrap-grid__col--sm--6{max-width:50rem;max-width:calc((100rem - var(--scrollbar-width))* .5);width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 6}.bootstrap-grid__col--sm--6.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 6}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--6{grid-row:span 6;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5);max-height:50rem;max-height:calc((100rem - var(--scrollbar-width))* .5)}.bootstrap-grid__col--sm--7{max-width:58.33rem;max-width:calc((100rem - var(--scrollbar-width))* .5833);width:58.33vw;width:calc((100vw - var(--scrollbar-width))* .5833);grid-column:span 7}.bootstrap-grid__col--sm--7.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 7}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--7{grid-row:span 7;height:58.33vw;height:calc((100vw - var(--scrollbar-width))* .5833);min-height:58.33vw;min-height:calc((100vw - var(--scrollbar-width))* .5833);max-height:58.33rem;max-height:calc((100rem - var(--scrollbar-width))* .5833)}.bootstrap-grid__col--sm--8{max-width:66.66rem;max-width:calc((100rem - var(--scrollbar-width))* .6666);width:66.66vw;width:calc((100vw - var(--scrollbar-width))* .6666);grid-column:span 8}.bootstrap-grid__col--sm--8.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 8}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--8{grid-row:span 8;height:66.66vw;height:calc((100vw - var(--scrollbar-width))* .6666);min-height:66.66vw;min-height:calc((100vw - var(--scrollbar-width))* .6666);max-height:66.66rem;max-height:calc((100rem - var(--scrollbar-width))* .6666)}.bootstrap-grid__col--sm--9{max-width:75rem;max-width:calc((100rem - var(--scrollbar-width))* .75);width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 9}.bootstrap-grid__col--sm--9.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 9}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--9{grid-row:span 9;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75);max-height:75rem;max-height:calc((100rem - var(--scrollbar-width))* .75)}.bootstrap-grid__col--sm--10{max-width:83.33rem;max-width:calc((100rem - var(--scrollbar-width))* .8333);width:83.33vw;width:calc((100vw - var(--scrollbar-width))* .8333);grid-column:span 10}.bootstrap-grid__col--sm--10.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 10}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--10{grid-row:span 10;height:83.33vw;height:calc((100vw - var(--scrollbar-width))* .8333);min-height:83.33vw;min-height:calc((100vw - var(--scrollbar-width))* .8333);max-height:83.33rem;max-height:calc((100rem - var(--scrollbar-width))* .8333)}.bootstrap-grid__col--sm--11{max-width:91.66rem;max-width:calc((100rem - var(--scrollbar-width))* .9166);width:91.66vw;width:calc((100vw - var(--scrollbar-width))* .9166);grid-column:span 11}.bootstrap-grid__col--sm--11.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 11}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--11{grid-row:span 11;height:91.66vw;height:calc((100vw - var(--scrollbar-width))* .9166);min-height:91.66vw;min-height:calc((100vw - var(--scrollbar-width))* .9166);max-height:91.66rem;max-height:calc((100rem - var(--scrollbar-width))* .9166)}.bootstrap-grid__col--sm--12{max-width:100rem;max-width:calc((100rem - var(--scrollbar-width))* 1);width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 12}.bootstrap-grid__col--sm--12.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--12{grid-row:span 12;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1);max-height:100rem;max-height:calc((100rem - var(--scrollbar-width))* 1)}@media screen and (min-width:100rem){.bootstrap-grid__col--sm--0--only,[class*=bootstrap-grid__col--xl--]{display:block}.bootstrap-grid__col--xl--0,.bootstrap-grid__col--xl--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid{grid-template-columns:repeat(auto-fill,8.33rem);grid-template-columns:repeat(auto-fill,calc((100rem - var(--scrollbar-width))* .0833))}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33rem;grid-auto-rows:calc((100rem - var(--scrollbar-width))* .0833)}[class*=bootstrap-grid__col--]{min-width:0}}@supports (display:grid){.bootstrap-grid>*,.bootstrap-grid>[class*=bootstrap-grid__col--]{min-width:initial;max-width:initial;width:initial}.bootstrap-grid>.bootstrap-grid,.bootstrap-grid>[class*=bootstrap-grid__col--].bootstrap-grid{display:grid}.bootstrap-grid>[class*=bootstrap-grid__height--]{height:unset;max-height:unset;min-height:initial}}.bootstrap-grid>script{display:none}
\ No newline at end of file
diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.css b/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.css
new file mode 100644
index 0000000..0f7054d
--- /dev/null
+++ b/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.css
@@ -0,0 +1,133 @@
+html {
+  font-size: 15px; }
+
+body {
+  margin: 0; }
+
+.bootstrap-container {
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100rem;
+  overflow-x: hidden;
+  padding-right: var(--scrollbar-width);
+  width: 100vw; }
+
+.bootstrap-container--left {
+  margin-left: 0; }
+
+.bootstrap-container--right {
+  margin-right: 0; }
+
+.bootstrap-grid {
+  align-items: flex-start;
+  box-sizing: border-box;
+  display: grid;
+  flex-wrap: wrap;
+  position: relative; }
+  .bootstrap-grid > * {
+    box-sizing: border-box; }
+    .bootstrap-grid > * :last-child,
+    .bootstrap-grid > * :last-child > :last-child,
+    .bootstrap-grid > * :last-child > :last-child > :last-child {
+      margin-bottom: 0; }
+
+[class*="bootstrap-padding"] {
+  box-sizing: border-box; }
+
+@supports (display: grid) {
+  .bootstrap-grid > * {
+    height: 100%; } }
+
+:root {
+  --scrollbar-width: 0px;
+  --bootstrap-height-1: 1rem;
+  --bootstrap-height-2: 2rem;
+  --bootstrap-height-3: 3rem;
+  --bootstrap-height-4: 4rem;
+  --bootstrap-height-5: 5rem;
+  --bootstrap-height-6: 6rem;
+  --bootstrap-height-7: 7rem;
+  --bootstrap-height-8: 8rem;
+  --bootstrap-height-9: 9rem;
+  --bootstrap-height-10: 10rem;
+  --bootstrap-height-11: 11rem;
+  --bootstrap-height-12: 12rem;
+  --bootstrap-height-13: 13rem;
+  --bootstrap-height-14: 14rem;
+  --bootstrap-height-15: 15rem;
+  --bootstrap-height-16: 16rem;
+  --bootstrap-height-17: 17rem;
+  --bootstrap-height-18: 18rem;
+  --bootstrap-height-19: 19rem;
+  --bootstrap-height-20: 20rem;
+  --bootstrap-height-21: 21rem;
+  --bootstrap-height-22: 22rem;
+  --bootstrap-height-23: 23rem;
+  --bootstrap-height-24: 24rem;
+  --bootstrap-height-25: 25rem;
+  --bootstrap-height-26: 26rem;
+  --bootstrap-height-27: 27rem;
+  --bootstrap-height-28: 28rem;
+  --bootstrap-height-29: 29rem; }
+
+.bootstrap-padding {
+  padding: 15px; }
+
+.bootstrap-padding--bottom {
+  padding-bottom: 15px; }
+
+.bootstrap-padding--left {
+  padding-left: 15px; }
+
+.bootstrap-padding--right {
+  padding-right: 15px; }
+
+.bootstrap-padding--top {
+  padding-top: 15px; }
+
+.bootstrap-padding--horizontal {
+  padding-left: 15px;
+  padding-right: 15px; }
+
+.bootstrap-padding--vertical {
+  padding-bottom: 15px;
+  padding-top: 15px; }
+
+.bootstrap-grid {
+  grid-auto-rows: minmax(1rem, min-content);
+  grid-template-columns: repeat(auto-fill, 8.33vw);
+  grid-template-columns: repeat(auto-fill, calc((100vw - var(--scrollbar-width))* 0.0833)); }
+  .bootstrap-grid.bootstrap-grid--fixed-columns {
+    grid-template-columns: repeat(auto-fill, 3rem); }
+  .bootstrap-grid.bootstrap-grid--fluid-rows {
+    grid-auto-rows: 8.33vw;
+    grid-auto-rows: calc((100vw - var(--scrollbar-width))* 0.0833); }
+  .bootstrap-grid > * {
+    grid-column: span 12; }
+
+@media screen and (min-width: 100rem) {
+  .bootstrap-padding {
+    padding: 15px; }
+  .bootstrap-padding--bottom {
+    padding-bottom: 15px; }
+  .bootstrap-padding--left {
+    padding-left: 15px; }
+  .bootstrap-padding--right {
+    padding-right: 15px; }
+  .bootstrap-padding--top {
+    padding-top: 15px; }
+  .bootstrap-padding--horizontal {
+    padding-left: 15px;
+    padding-right: 15px; }
+  .bootstrap-padding--vertical {
+    padding-bottom: 15px;
+    padding-top: 15px; }
+  .bootstrap-grid {
+    grid-template-columns: repeat(auto-fill, 8.33rem);
+    grid-template-columns: repeat(auto-fill, calc((100rem - var(--scrollbar-width))* 0.0833)); }
+    .bootstrap-grid.bootstrap-grid--fixed-columns {
+      grid-template-columns: repeat(auto-fill, 8.33333rem); }
+    .bootstrap-grid.bootstrap-grid--fluid-rows {
+      grid-auto-rows: 8.33rem;
+      grid-auto-rows: calc((100rem - var(--scrollbar-width))* 0.0833); } }
diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.min.css b/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.min.css
new file mode 100644
index 0000000..e6da9e5
--- /dev/null
+++ b/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.min.css
@@ -0,0 +1 @@
+html{font-size:15px}body{margin:0}.bootstrap-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.bootstrap-container--left{margin-left:0}.bootstrap-container--right{margin-right:0}.bootstrap-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(1rem,min-content);grid-template-columns:repeat(auto-fill,8.33vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .0833))}.bootstrap-grid>*{box-sizing:border-box;grid-column:span 12}.bootstrap-grid>* :last-child,.bootstrap-grid>* :last-child>:last-child,.bootstrap-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bootstrap-padding]{box-sizing:border-box}@supports (display:grid){.bootstrap-grid>*{height:100%}}:root{--scrollbar-width:0px;--bootstrap-height-1:1rem;--bootstrap-height-2:2rem;--bootstrap-height-3:3rem;--bootstrap-height-4:4rem;--bootstrap-height-5:5rem;--bootstrap-height-6:6rem;--bootstrap-height-7:7rem;--bootstrap-height-8:8rem;--bootstrap-height-9:9rem;--bootstrap-height-10:10rem;--bootstrap-height-11:11rem;--bootstrap-height-12:12rem;--bootstrap-height-13:13rem;--bootstrap-height-14:14rem;--bootstrap-height-15:15rem;--bootstrap-height-16:16rem;--bootstrap-height-17:17rem;--bootstrap-height-18:18rem;--bootstrap-height-19:19rem;--bootstrap-height-20:20rem;--bootstrap-height-21:21rem;--bootstrap-height-22:22rem;--bootstrap-height-23:23rem;--bootstrap-height-24:24rem;--bootstrap-height-25:25rem;--bootstrap-height-26:26rem;--bootstrap-height-27:27rem;--bootstrap-height-28:28rem;--bootstrap-height-29:29rem}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,3rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .0833)}@media screen and (min-width:100rem){.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid{grid-template-columns:repeat(auto-fill,8.33rem);grid-template-columns:repeat(auto-fill,calc((100rem - var(--scrollbar-width))* .0833))}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33rem;grid-auto-rows:calc((100rem - var(--scrollbar-width))* .0833)}}
\ No newline at end of file
diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid.css b/examples/bootstrap/css-gridish/css/bootstrap-grid.css
index 8ae05a7..0d3f2be 100755
--- a/examples/bootstrap/css-gridish/css/bootstrap-grid.css
+++ b/examples/bootstrap/css-gridish/css/bootstrap-grid.css
@@ -10,6 +10,7 @@ body {
   margin-right: auto;
   max-width: 100rem;
   overflow-x: hidden;
+  padding-right: var(--scrollbar-width);
   width: 100vw; }
 
 .bootstrap-container--left {
@@ -39,6 +40,7 @@ body {
     height: 100%; } }
 
 :root {
+  --scrollbar-width: 0px;
   --bootstrap-height-1: 1rem;
   --bootstrap-height-2: 2rem;
   --bootstrap-height-3: 3rem;
@@ -192,11 +194,13 @@ body {
 
 .bootstrap-grid {
   grid-auto-rows: minmax(1rem, min-content);
-  grid-template-columns: repeat(auto-fill, 8.33vw); }
+  grid-template-columns: repeat(auto-fill, 8.33vw);
+  grid-template-columns: repeat(auto-fill, calc((100vw - var(--scrollbar-width))* 0.0833)); }
   .bootstrap-grid.bootstrap-grid--fixed-columns {
     grid-template-columns: repeat(auto-fill, 3rem); }
   .bootstrap-grid.bootstrap-grid--fluid-rows {
-    grid-auto-rows: 8.33vw; }
+    grid-auto-rows: 8.33vw;
+    grid-auto-rows: calc((100vw - var(--scrollbar-width))* 0.0833); }
   .bootstrap-grid > * {
     grid-column: span 12; }
 
@@ -333,8 +337,10 @@ body {
     padding-bottom: 15px;
     padding-top: 15px; }
   .bootstrap-grid {
-    grid-template-columns: repeat(auto-fill, 8.33rem); }
+    grid-template-columns: repeat(auto-fill, 8.33rem);
+    grid-template-columns: repeat(auto-fill, calc((100rem - var(--scrollbar-width))* 0.0833)); }
     .bootstrap-grid.bootstrap-grid--fixed-columns {
       grid-template-columns: repeat(auto-fill, 8.33333rem); }
     .bootstrap-grid.bootstrap-grid--fluid-rows {
-      grid-auto-rows: 8.33rem; } }
+      grid-auto-rows: 8.33rem;
+      grid-auto-rows: calc((100rem - var(--scrollbar-width))* 0.0833); } }
diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid.min.css b/examples/bootstrap/css-gridish/css/bootstrap-grid.min.css
index 39106ce..f914aaa 100755
--- a/examples/bootstrap/css-gridish/css/bootstrap-grid.min.css
+++ b/examples/bootstrap/css-gridish/css/bootstrap-grid.min.css
@@ -1 +1 @@
-html{font-size:15px}body{margin:0}.bootstrap-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;width:100vw}.bootstrap-container--left{margin-left:0}.bootstrap-container--right{margin-right:0}.bootstrap-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(1rem,min-content);grid-template-columns:repeat(auto-fill,8.33vw)}.bootstrap-grid>*{box-sizing:border-box;grid-column:span 12}.bootstrap-grid>* :last-child,.bootstrap-grid>* :last-child>:last-child,.bootstrap-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bootstrap-padding]{box-sizing:border-box}@supports (display:grid){.bootstrap-grid>*{height:100%}}:root{--bootstrap-height-1:1rem;--bootstrap-height-2:2rem;--bootstrap-height-3:3rem;--bootstrap-height-4:4rem;--bootstrap-height-5:5rem;--bootstrap-height-6:6rem;--bootstrap-height-7:7rem;--bootstrap-height-8:8rem;--bootstrap-height-9:9rem;--bootstrap-height-10:10rem;--bootstrap-height-11:11rem;--bootstrap-height-12:12rem;--bootstrap-height-13:13rem;--bootstrap-height-14:14rem;--bootstrap-height-15:15rem;--bootstrap-height-16:16rem;--bootstrap-height-17:17rem;--bootstrap-height-18:18rem;--bootstrap-height-19:19rem;--bootstrap-height-20:20rem;--bootstrap-height-21:21rem;--bootstrap-height-22:22rem;--bootstrap-height-23:23rem;--bootstrap-height-24:24rem;--bootstrap-height-25:25rem;--bootstrap-height-26:26rem;--bootstrap-height-27:27rem;--bootstrap-height-28:28rem;--bootstrap-height-29:29rem}.bootstrap-grid__height--sm--0{height:0;min-height:0}.bootstrap-grid__height--sm--1{grid-row:span 1}.bootstrap-grid__height--sm--2{grid-row:span 2}.bootstrap-grid__height--sm--3{grid-row:span 3}.bootstrap-grid__height--sm--4{grid-row:span 4}.bootstrap-grid__height--sm--5{grid-row:span 5}.bootstrap-grid__height--sm--6{grid-row:span 6}.bootstrap-grid__height--sm--7{grid-row:span 7}.bootstrap-grid__height--sm--8{grid-row:span 8}.bootstrap-grid__height--sm--9{grid-row:span 9}.bootstrap-grid__height--sm--10{grid-row:span 10}.bootstrap-grid__height--sm--11{grid-row:span 11}.bootstrap-grid__height--sm--12{grid-row:span 12}.bootstrap-grid__height--sm--13{grid-row:span 13}.bootstrap-grid__height--sm--14{grid-row:span 14}.bootstrap-grid__height--sm--15{grid-row:span 15}.bootstrap-grid__height--sm--16{grid-row:span 16}.bootstrap-grid__height--sm--17{grid-row:span 17}.bootstrap-grid__height--sm--18{grid-row:span 18}.bootstrap-grid__height--sm--19{grid-row:span 19}.bootstrap-grid__height--sm--20{grid-row:span 20}.bootstrap-grid__height--sm--21{grid-row:span 21}.bootstrap-grid__height--sm--22{grid-row:span 22}.bootstrap-grid__height--sm--23{grid-row:span 23}.bootstrap-grid__height--sm--24{grid-row:span 24}.bootstrap-grid__height--sm--25{grid-row:span 25}.bootstrap-grid__height--sm--26{grid-row:span 26}.bootstrap-grid__height--sm--27{grid-row:span 27}.bootstrap-grid__height--sm--28{grid-row:span 28}.bootstrap-grid__height--sm--29{grid-row:span 29}[class*=bootstrap-grid__col--sm--]{display:block}.bootstrap-grid__col--sm--0,.bootstrap-grid__col--sm--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,3rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33vw}.bootstrap-grid__col--sm--1,.bootstrap-grid__col--sm--1.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 1}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--1{grid-row:span 1}.bootstrap-grid__col--sm--2,.bootstrap-grid__col--sm--2.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 2}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--2{grid-row:span 2}.bootstrap-grid__col--sm--3,.bootstrap-grid__col--sm--3.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 3}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--3{grid-row:span 3}.bootstrap-grid__col--sm--4,.bootstrap-grid__col--sm--4.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 4}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--4{grid-row:span 4}.bootstrap-grid__col--sm--5,.bootstrap-grid__col--sm--5.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 5}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--5{grid-row:span 5}.bootstrap-grid__col--sm--6,.bootstrap-grid__col--sm--6.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 6}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--6{grid-row:span 6}.bootstrap-grid__col--sm--7,.bootstrap-grid__col--sm--7.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 7}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--7{grid-row:span 7}.bootstrap-grid__col--sm--8,.bootstrap-grid__col--sm--8.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 8}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--8{grid-row:span 8}.bootstrap-grid__col--sm--9,.bootstrap-grid__col--sm--9.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 9}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--9{grid-row:span 9}.bootstrap-grid__col--sm--10,.bootstrap-grid__col--sm--10.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 10}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--10{grid-row:span 10}.bootstrap-grid__col--sm--11,.bootstrap-grid__col--sm--11.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 11}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--11{grid-row:span 11}.bootstrap-grid__col--sm--12,.bootstrap-grid__col--sm--12.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--12{grid-row:span 12}@media screen and (min-width:100rem){.bootstrap-grid__col--sm--0--only,[class*=bootstrap-grid__col--xl--]{display:block}.bootstrap-grid__col--xl--0,.bootstrap-grid__col--xl--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid{grid-template-columns:repeat(auto-fill,8.33rem)}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33rem}}
\ No newline at end of file
+html{font-size:15px}body{margin:0}.bootstrap-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.bootstrap-container--left{margin-left:0}.bootstrap-container--right{margin-right:0}.bootstrap-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(1rem,min-content);grid-template-columns:repeat(auto-fill,8.33vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .0833))}.bootstrap-grid>*{box-sizing:border-box;grid-column:span 12}.bootstrap-grid>* :last-child,.bootstrap-grid>* :last-child>:last-child,.bootstrap-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bootstrap-padding]{box-sizing:border-box}@supports (display:grid){.bootstrap-grid>*{height:100%}}:root{--scrollbar-width:0px;--bootstrap-height-1:1rem;--bootstrap-height-2:2rem;--bootstrap-height-3:3rem;--bootstrap-height-4:4rem;--bootstrap-height-5:5rem;--bootstrap-height-6:6rem;--bootstrap-height-7:7rem;--bootstrap-height-8:8rem;--bootstrap-height-9:9rem;--bootstrap-height-10:10rem;--bootstrap-height-11:11rem;--bootstrap-height-12:12rem;--bootstrap-height-13:13rem;--bootstrap-height-14:14rem;--bootstrap-height-15:15rem;--bootstrap-height-16:16rem;--bootstrap-height-17:17rem;--bootstrap-height-18:18rem;--bootstrap-height-19:19rem;--bootstrap-height-20:20rem;--bootstrap-height-21:21rem;--bootstrap-height-22:22rem;--bootstrap-height-23:23rem;--bootstrap-height-24:24rem;--bootstrap-height-25:25rem;--bootstrap-height-26:26rem;--bootstrap-height-27:27rem;--bootstrap-height-28:28rem;--bootstrap-height-29:29rem}.bootstrap-grid__height--sm--0{height:0;min-height:0}.bootstrap-grid__height--sm--1{grid-row:span 1}.bootstrap-grid__height--sm--2{grid-row:span 2}.bootstrap-grid__height--sm--3{grid-row:span 3}.bootstrap-grid__height--sm--4{grid-row:span 4}.bootstrap-grid__height--sm--5{grid-row:span 5}.bootstrap-grid__height--sm--6{grid-row:span 6}.bootstrap-grid__height--sm--7{grid-row:span 7}.bootstrap-grid__height--sm--8{grid-row:span 8}.bootstrap-grid__height--sm--9{grid-row:span 9}.bootstrap-grid__height--sm--10{grid-row:span 10}.bootstrap-grid__height--sm--11{grid-row:span 11}.bootstrap-grid__height--sm--12{grid-row:span 12}.bootstrap-grid__height--sm--13{grid-row:span 13}.bootstrap-grid__height--sm--14{grid-row:span 14}.bootstrap-grid__height--sm--15{grid-row:span 15}.bootstrap-grid__height--sm--16{grid-row:span 16}.bootstrap-grid__height--sm--17{grid-row:span 17}.bootstrap-grid__height--sm--18{grid-row:span 18}.bootstrap-grid__height--sm--19{grid-row:span 19}.bootstrap-grid__height--sm--20{grid-row:span 20}.bootstrap-grid__height--sm--21{grid-row:span 21}.bootstrap-grid__height--sm--22{grid-row:span 22}.bootstrap-grid__height--sm--23{grid-row:span 23}.bootstrap-grid__height--sm--24{grid-row:span 24}.bootstrap-grid__height--sm--25{grid-row:span 25}.bootstrap-grid__height--sm--26{grid-row:span 26}.bootstrap-grid__height--sm--27{grid-row:span 27}.bootstrap-grid__height--sm--28{grid-row:span 28}.bootstrap-grid__height--sm--29{grid-row:span 29}[class*=bootstrap-grid__col--sm--]{display:block}.bootstrap-grid__col--sm--0,.bootstrap-grid__col--sm--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,3rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .0833)}.bootstrap-grid__col--sm--1,.bootstrap-grid__col--sm--1.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 1}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--1{grid-row:span 1}.bootstrap-grid__col--sm--2,.bootstrap-grid__col--sm--2.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 2}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--2{grid-row:span 2}.bootstrap-grid__col--sm--3,.bootstrap-grid__col--sm--3.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 3}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--3{grid-row:span 3}.bootstrap-grid__col--sm--4,.bootstrap-grid__col--sm--4.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 4}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--4{grid-row:span 4}.bootstrap-grid__col--sm--5,.bootstrap-grid__col--sm--5.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 5}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--5{grid-row:span 5}.bootstrap-grid__col--sm--6,.bootstrap-grid__col--sm--6.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 6}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--6{grid-row:span 6}.bootstrap-grid__col--sm--7,.bootstrap-grid__col--sm--7.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 7}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--7{grid-row:span 7}.bootstrap-grid__col--sm--8,.bootstrap-grid__col--sm--8.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 8}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--8{grid-row:span 8}.bootstrap-grid__col--sm--9,.bootstrap-grid__col--sm--9.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 9}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--9{grid-row:span 9}.bootstrap-grid__col--sm--10,.bootstrap-grid__col--sm--10.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 10}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--10{grid-row:span 10}.bootstrap-grid__col--sm--11,.bootstrap-grid__col--sm--11.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 11}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--11{grid-row:span 11}.bootstrap-grid__col--sm--12,.bootstrap-grid__col--sm--12.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--12{grid-row:span 12}@media screen and (min-width:100rem){.bootstrap-grid__col--sm--0--only,[class*=bootstrap-grid__col--xl--]{display:block}.bootstrap-grid__col--xl--0,.bootstrap-grid__col--xl--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid{grid-template-columns:repeat(auto-fill,8.33rem);grid-template-columns:repeat(auto-fill,calc((100rem - var(--scrollbar-width))* .0833))}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33rem;grid-auto-rows:calc((100rem - var(--scrollbar-width))* .0833)}}
\ No newline at end of file
diff --git a/examples/bootstrap/css-gridish/js/bootstrap-grid.js b/examples/bootstrap/css-gridish/js/bootstrap-grid.js
new file mode 100644
index 0000000..6bd20d4
--- /dev/null
+++ b/examples/bootstrap/css-gridish/js/bootstrap-grid.js
@@ -0,0 +1,20 @@
+(function () {
+  var updateScrollbarWidth = function () {
+    const scrollbarWidth =
+      window.innerWidth - document.documentElement.clientWidth + "px";
+
+    document.documentElement.style.setProperty(
+      "--scrollbar-width",
+      scrollbarWidth
+    );
+  };
+
+  var scrollbarObserver = new MutationObserver(updateScrollbarWidth);
+  scrollbarObserver.observe(document.body, {
+    attributes: true,
+    childList: true,
+    characterData: true
+  });
+
+  updateScrollbarWidth();
+})();
\ No newline at end of file
diff --git a/examples/bootstrap/css-gridish/scss/_core.scss b/examples/bootstrap/css-gridish/scss/_core.scss
index 0df8cfd..7ea5a1d 100755
--- a/examples/bootstrap/css-gridish/scss/_core.scss
+++ b/examples/bootstrap/css-gridish/scss/_core.scss
@@ -17,6 +17,7 @@ body {
   margin-right: auto;
   max-width: #{map-get($last, breakpoint)}rem;
   overflow-x: hidden;
+  padding-right: var(--scrollbar-width);
   width: 100vw;
 }
 
@@ -77,21 +78,26 @@ body {
   }
 }
 
-@include grid-legacy-wrapper($includeFlexFallback) {
-  :root {
+:root {
+  --scrollbar-width: 0px;
+  @include grid-legacy-wrapper($includeFlexFallback) {
     @include grid-heights-fixed($rows);
   }
 }
 
 @each $name, $breakpoint in $allBreakpoints {
   @include media-query($name) {
-    @if is-same-breakpoint($breakpoint, $last) == false {
+    @if is-same-breakpoint($breakpoint, $last) == false and $minimal == false {
       @include grid-legacy-heights($name);
     }
-    @include grid-legacy-zeros($breakpoint, $name);
+    @if $minimal == false {
+      @include grid-legacy-zeros($breakpoint, $name);
+    }
     @include grid-padding($breakpoint);
     @include grid($breakpoint, $name);
-    @include grid-legacy-columns($breakpoint, $name);
+    @if $minimal == false {
+      @include grid-legacy-columns($breakpoint, $name);
+    }
 
     // Wrap all bleed/break classes and css variables in a CSS Grid support query
     @include grid-legacy-wrapper($includeFlexFallback) {
diff --git a/examples/bootstrap/css-gridish/scss/_mixins.scss b/examples/bootstrap/css-gridish/scss/_mixins.scss
index cf7bf4b..0851a57 100755
--- a/examples/bootstrap/css-gridish/scss/_mixins.scss
+++ b/examples/bootstrap/css-gridish/scss/_mixins.scss
@@ -1,13 +1,15 @@
 // Set the width of a grid’s column
 @mixin grid($breakpoint, $breakpointName) {
   @if (map-get($breakpoint, columns) != null) {
-    $columnSize: get-fluid-size($breakpointName, 1);
+    $columnSize: get-fluid-size($breakpointName, 1, false);
+    $columnSizeScrollbar: get-fluid-size($breakpointName, 1);
 
     .#{$prefix}-grid {
       @if is-same-breakpoint($breakpoint, $first) {
         grid-auto-rows: minmax($rowHeight * 1rem, min-content);
       }
       grid-template-columns: repeat(auto-fill, $columnSize);
+      grid-template-columns: repeat(auto-fill, $columnSizeScrollbar);
 
       &.#{$prefix}-grid--fixed-columns {
         grid-template-columns: repeat(
@@ -20,6 +22,7 @@
 
       &.#{$prefix}-grid--fluid-rows {
         grid-auto-rows: $columnSize;
+        grid-auto-rows: $columnSizeScrollbar;
       }
 
       @if is-same-breakpoint($breakpoint, $last) == false {
@@ -55,7 +58,8 @@
           $columnMultiplier: $i *
             map-get($breakpoint, columns) /
             map-get($currentBreakpoint, columns);
-          $columnSize: get-fluid-size($name, $columnMultiplier);
+          $columnSize: get-fluid-size($name, $columnMultiplier, false);
+          $columnSizeScrollbar: get-fluid-size($name, $columnMultiplier);
 
           $isSecondToLast: is-same-breakpoint(
             $breakpoint,
@@ -63,6 +67,11 @@
           );
 
           $maxColumnSize: get-fluid-size(
+            nth(nth($allBreakpoints, length($allBreakpoints)), 1),
+            $columnMultiplier,
+            false
+          );
+          $maxColumnSizeScrollbar: get-fluid-size(
             nth(nth($allBreakpoints, length($allBreakpoints)), 1),
             $columnMultiplier
           );
@@ -72,8 +81,10 @@
               // If second-to-last media query, apply max-width instead of remaking classes in last media query
               @if $isSecondToLast {
                 max-width: $maxColumnSize;
+                max-width: $maxColumnSizeScrollbar;
               }
               width: $columnSize;
+              width: $columnSizeScrollbar;
             }
             grid-column: span #{$columnMultiplier};
 
@@ -89,10 +100,13 @@
             grid-row: span $i;
             @if $includeFlexFallback {
               height: $columnSize;
+              height: $columnSizeScrollbar;
               min-height: $columnSize;
+              min-height: $columnSizeScrollbar;
               // If second-to-last media query, apply max-height instead of remaking classes in last media query
               @if $isSecondToLast {
                 max-height: $maxColumnSize;
+                max-height: $maxColumnSizeScrollbar;
               }
             }
           }
diff --git a/examples/bootstrap/css-gridish/scss/_utilities.scss b/examples/bootstrap/css-gridish/scss/_utilities.scss
index 1d29635..31d2fd1 100644
--- a/examples/bootstrap/css-gridish/scss/_utilities.scss
+++ b/examples/bootstrap/css-gridish/scss/_utilities.scss
@@ -18,6 +18,7 @@
 /// Returns a calc() expression that represents a fluid width at a given breakpoint.
 /// @param {String} $breakpointName A valid breakpoint.
 /// @param {Number} $columnSpan The number of columns to span across.
+/// @param {Boolean} $supportsCSSVariable Does the output rule include CSS Variables?
 /// @return {Length} A calc() expression representing fluid width.
 /// @example scss
 /// button {
@@ -31,7 +32,11 @@
 ///     max-width: 25vw;
 ///   }
 /// }
-@function get-fluid-size($breakpointName, $columnSpan) {
+@function get-fluid-size(
+  $breakpointName,
+  $columnSpan,
+  $supportsCSSVariable: true
+) {
   $breakpoint: map-get($breakpointsAndArtboards, $breakpointName);
 
   @if ($breakpoint == null or type-of($breakpoint) != "map") {
@@ -54,16 +59,27 @@
   }
 
   $container: 100vw;
+  @if ($supportsCSSVariable) {
+    $container: "(100vw - var(--scrollbar-width))";
+  }
+
   // Last breakpoint is a max-width and should be a fixed number
   @if is-same-breakpoint($breakpoint, $last) {
     $container: map-get($breakpoint, breakpoint) * 1rem;
+    @if ($supportsCSSVariable) {
+      $container: "(#{$container} - var(--scrollbar-width))";
+    }
   }
 
   $multiplier: round-decimal($columnSpan / $columnTotal, 4, floor);
 
   // For IE, we can't have a 0 in the $fluidWidth calc().
   @if ($margin == 0) {
-    @return $container * $multiplier;
+    @if ($supportsCSSVariable) {
+      @return calc(#{$container}* #{$multiplier});
+    } @else {
+      @return $container * $multiplier;
+    }
   }
 
   @return calc((#{$container} - #{$margin * 2}) * #{$multiplier});
diff --git a/examples/bootstrap/css-gridish/scss/_variables.scss b/examples/bootstrap/css-gridish/scss/_variables.scss
index 19b5e36..1863d1e 100755
--- a/examples/bootstrap/css-gridish/scss/_variables.scss
+++ b/examples/bootstrap/css-gridish/scss/_variables.scss
@@ -9,6 +9,7 @@ $breakpoints: add-padding(map-get($grid-values, "breakpoints"));
 $first: nth(nth($breakpoints, 1), 2);
 $last: nth(nth($breakpoints, -1), 2);
 $includeFlexFallback: false !default;
+$minimal: false !default;
 $rowHeight: map-get($grid-values, "rowHeight");
 $rows: map-get($grid-values, "rows");
 $extraArtboards: map-get($grid-values, "extraArtboards");
diff --git a/examples/bootstrap/css-gridish/scss/bootstrap-grid-minimal.scss b/examples/bootstrap/css-gridish/scss/bootstrap-grid-minimal.scss
new file mode 100644
index 0000000..6826a5e
--- /dev/null
+++ b/examples/bootstrap/css-gridish/scss/bootstrap-grid-minimal.scss
@@ -0,0 +1,3 @@
+$minimal: true;
+
+@import "core.scss";
diff --git a/examples/bootstrap/index.html b/examples/bootstrap/index.html
index 9aaac3a..90082b2 100644
--- a/examples/bootstrap/index.html
+++ b/examples/bootstrap/index.html
@@ -51,6 +51,7 @@ <h2>Bootstrap Example</h2>
     </p>
   </div>
 </body>
+<script type="text/javascript" src="./css-gridish/js/carbon-grid.js"></script>
 <script>
   function makeNewElement() {
     var colors = ["#007bff", "#6c757d", "#28a745", "#dc3545", "#ffc107"];
diff --git a/examples/carbon/css-gridish/README.md b/examples/carbon/css-gridish/README.md
index 845ab77..4b516ca 100755
--- a/examples/carbon/css-gridish/README.md
+++ b/examples/carbon/css-gridish/README.md
@@ -4,12 +4,12 @@ An example of [CSS Gridish](../../../README.md) generating CSS Grid code, fallba
 
 This grid was bootstrapped using [CSS Gridish](https://github.com/ibm/css-gridish). It includes:
 - CSS Grid Layout code with a Flexbox fallback in CSS and SCSS
-- Sketch file with artboards
+- Sketch design file with artboards
 - Config file (`css-gridish.json`) to review webpages with the [CSS Gridish Chrome Extension](https://chrome.google.com/webstore/detail/css-gridish/ebhcneoilkamaddhlphlehojpcooobgc)
 
 ## Sketch Artboards and Chrome Extension
 
-The Sketch file can be found above in the list of files titled `bx-grid.sketch`. It includes both grid (CTRL+G) and layout (CTRL+L) settings.
+The Sketch design file can be found above in the list of files titled `bx-grid.sketch`. It includes both grid (CTRL+G) and layout (CTRL+L) settings.
 
 The Chrome extension uses the same shortcuts. To set the extension up:
 
@@ -17,21 +17,21 @@ The Chrome extension uses the same shortcuts. To set the extension up:
 2. Download the `css-gridish.json` file in this project
 3. Open the CSS Gridish menu in your Chrome toolbar and upload your `css-gridish.json` file
 
-## Legacy Support
+## Files
 
-If you have no need to support browsers like IE 11 and Edge <15, please use `css/bx-grid.min.css`. This will omit the CSS Flexbox fallback from your code.
+There are three CSS files to choose from based on what browser support you want and whether you will use native CSS Grid rules or our provided classes:
 
-If you are supporting browsers that lack [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), you can use `css/bx-grid-legacy.min.css` and the legacy classes below. With the legacy file, the browsers that do not support the final CSS Grid Legacy spec will fallback to a flexbox alternative. The flexbox alternative supports embedded subgrids that still reflect the overall grid system’s column structure.
+| Filename | When to Use |
+| ---------- | ----------------- |
+| `css/bx-grid-legacy.min.css` | To also support browsers that do not have [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility) (IE 11 and Edge <15) with a reliable Flexbox fallback |
+| `css/bx-grid.min.css` | To only support browsers with [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility) |
+| `css/bx-grid-minimal.min.css` | To only support browsers with [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), but not use any generated column or height classes |
 
-### Transitioning from Legacy
-
-Once your experience can drop support for IE 11 and Edge <15, you can simply remove all legacy classes and switch over to `css/bx-grid.min.css`.
+There is also an optional JavaScript file included at `js/bx-grid.js`. This will adjust the grid to not go behind browser scrollbars since different browsers handle the `vw` unit differently. It applies to any browser that supports [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility) and [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#Browser_compatibility).
 
 ## Breakpoints
 
-There are currently 2 breakpoints where the design specs change for our
-grid. The great thing about CSS Grid Layout is that you can rearrange your
-layout at any custom breakpoint between those:
+A breakpoint is where the number of columns or another value changes using a media query. There are currently 2 breakpoints where the design specs change for our grid. The great thing about CSS Grid Layout is that you can rearrange your layout at any custom breakpoint between those:
 
 | Breakpoint | Number of Columns | Width    | Value  |
 | ---------- | ----------------- | ------- | ------ |
@@ -60,28 +60,35 @@ The example above will create all legacy classes for your custom breakpoints lik
 
 If you are new to CSS Grid, please try [learning the basics](https://www.google.com/search?q=css+grid+tutorials&oq=css+grid+tutorials) before using this. For the most part, you will only have to use `grid-column` and `grid-row` with the following classes:
 
-| Class Name                                | Purpose                                                                                    |
-| ----------------------------------------- | ------------------------------------------------------------------------------------------ |
-| `.bx-container`                          | Container element of whole page for proper margin and max-width (can be used on body tag ) |
-| `.bx-container--[left, right]`            | Align the container element to the left or right side                                      |
-| `.bx-container__bleed--[sm]`                         | Extend the background color of a container child into the container margin on both sides starting at a specific breakpoint (CSS Grid browsers only)        |
-| `.bx-container__bleed--[sm]--[left, right]`           | Extend the background color of a grid into the container margin on one side at a specific breakpoint (CSS Grid browsers only)           |
-| `.bx-container__break--[sm]`                         | Child of container element should ignore grid’s margin at a specific breakpoint (CSS Grid browsers only)       |
-| `.bx-container__break--[sm]--[left, right]`           | Child of container element should ignore grid’s margin on one side at a specific breakpoint (CSS Grid browsers only)                             |
-| `.bx-grid`                               | Use anytime you want to apply CSS Grid Layout, including as embedded subgrids              |
-| `.bx-grid--fixed-columns`                         | Switch grid’s column widths to fixed instead of fluid                                       |
-| `.bx-grid--fluid-rows`                         | Switch grid’s row height to match the width of a column                                        |
-| `.bx-padding`                            | Add one unit of padding to element on all sides                                            |
-| `.bx-padding--[bottom, left, right, top]` | Add one unit of padding to element on one side                                             |
-| `.bx-padding--[horizontal, vertical]`     | Add one unit of padding to element on two sides                                            |
-| `.bx-grid__col--sm--[1-12]`                          | Set the width out of 12 columns for an item in the grid starting at the sm breakpoint |
-| `.bx-grid__col--[sm]--0`                          | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified |
-| `.bx-grid__col--[sm]--0--only`                          | Do not display item only at specific breakpoint |
-| `.bx-grid__height--[sm]--[1-30]`                          | Set the min-height based on an interval of 8px for an item starting at the breakpoint specified |
-| `.bx-grid__height--[sm]--0`                          | Reset the min-height for an item starting at the specified breakpoint |
+| Class Name | Purpose | Child? |
+| ---------- | ------- | ------ |
+| `.bx-container` | Container element of whole page for proper margin and max-width (can be used on body tag). You need to use `.bx-grid` on this same element. | No |
+| `.bx-container--[left, right]` | Align the container element to the left or right side | |
+| `.bx-container__bleed--[sm]` | Extend the background color of a container child into the container margin on both sides starting at a specific breakpoint (CSS Grid browsers only) | Child of `.bx-container` |
+| `.bx-container__bleed--[sm]--[left, right]` | Extend the background color of a grid into the container margin on one side at a specific breakpoint (CSS Grid browsers only) | Child of `.bx-container` |
+| `.bx-container__break--[sm]` |Ignore container’s margin at a specific breakpoint (CSS Grid browsers only) | Child of `.bx-container` |
+| `.bx-container__break--[sm]--[left, right]` | Ignore container’s margin on one side at a specific breakpoint (CSS Grid browsers only) | Child of `.bx-container` |
+| `.bx-grid` | Use anytime you want to apply CSS Grid Layout, including as embedded subgrids | Peer of `.bx-container` or direct child of another `.bx-grid` |
+| `.bx-grid--fixed-columns` | Switch grid’s column widths to fixed instead of fluid | |
+| `.bx-grid--fluid-rows` | Switch grid’s row height to match the width of a column | |
+| `.bx-padding` | Add one unit of padding to element on all sides | Child of `.bx-grid` |
+| `.bx-padding--[bottom, left, right, top]` | Add one unit of padding to element on one side | Child of `.bx-grid` |
+| `.bx-padding--[horizontal, vertical]` | Add one unit of padding to element on two sides | Child of `.bx-grid` |
 
 By default, the grid code uses fluid columns and fixed rows. You can switch both aspects with `.bx-grid--fixed-columns` and `.bx-grid--fluid-rows`. When switching to fluid rows, the rows will scale across breakpoints just like `col` classes and only supports quantities up to the amount of columns in that breakpoint.
 
+## Optional Classes
+
+The following classes are included in `css/bx-grid.min.css` and `css/bx-grid-legacy.min.css`. For the minimal file, you would instead use native CSS Grid rules as needed.
+
+| Class Name | Purpose | Child? |
+| ---------- | ------- | ------ |
+| `.bx-grid__col--sm--[1-12]` | Set the width out of 12 columns for an item in the grid starting at the sm breakpoint | Child of `.bx-grid` |
+| `.bx-grid__col--[sm]--0` | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified | Child of `.bx-grid` |
+| `.bx-grid__col--[sm]--0--only` | Do not display item only at specific breakpoint | Child of `.bx-grid` |
+| `.bx-grid__height--[sm]--[1-30]` | Set the min-height based on an interval of 8px for an item starting at the breakpoint specified | Child of `.bx-grid` |
+| `.bx-grid__height--[sm]--0` | Reset the min-height for an item starting at the specified breakpoint | Child of `.bx-grid` |
+
 If you follow the instructions above for custom breakpoints, all of the `col` and `height` classes will generate with a version for each custom breakpoint too. For example, adding the custom breakpoint of `whateversize` will create `.bx-grid__col--whateversize--1`. Since that custom breakpoint is right after the previous breakpoint, it will have the same amount of columns and min-height.
 
 ## Variables
@@ -184,22 +191,22 @@ button {
 
 A lot of times, you will want an item to break out of the gutters for background color, to extend media, or for another reason. Until the CSS Grid spec has a way to ignore that gutter, we use the padding classes (`.bx-padding`) to opt-in to respecting the gutter. The padding classes are always half the size of a gutter for alignment.
 
-### Why is the fallback using flexbox instead of the `-ms` prefix use of CSS Grid?
+### Why is the legacy version using Flexbox instead of the `-ms` prefix use of CSS Grid?
 
 The biggest reason is due to the lack of auto-placement when using that prefix. See more details about difference in the `-ms` prefix in [this blog post.](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/)
 
+### Why are there no grouping row classes needed?
+
+Thanks to flexbox’s wrapping functionality, nodes that specify rows are not necessary. Only create a node for a row if it has semantic or accessibility significance. You can keep embedding `.bx-grid` as necessary to accomplish this.
+
+### What happens if I specify the column class for one breakpoint, but not the column class for the next breakpoint?
+
+To maintain a mobile-first opinion, column widths will scale to the next breakpoint if not specified. This means that a `.bx-grid__col--sm--1` be the size of `.bx-grid__col----2` if no `` class was declared.
+
 ### Why are columns using vw units and sometimes the calc function?
 
 Until Edge and Safari support
 [`display: subgrid`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility),
 it is difficult for you to write semantic HTML with CSS Grid Layout. We are
 able to take advantage of vw units and the calc function so you can embed 
-`.bx-grid` elements inside of each other and still respect the overall grid design.
-
-### Why are there no grouping row classes needed?
-
-Thanks to flexbox’s wrapping functionality, nodes that specify rows are not necessary. Only create a node for a row if it has semantic or accessibility significance. You can keep embedding `.bx-grid` as necessary to accomplish this.
-
-### What happens in the legacy implementation if I specify the column width for one breakpoint, but not the next larger breakpoint?
-
-To maintain a mobile-first opinion, column widths will scale to the next breakpoint if not specified. This means that a `.bx-grid__col--sm--1` be the size of `.bx-grid__col----2` if no `` class was declared.
\ No newline at end of file
+`.bx-grid` elements inside of each other and still respect the overall grid design.
\ No newline at end of file
diff --git a/examples/carbon/css-gridish/bx-grid.sketch b/examples/carbon/css-gridish/bx-grid.sketch
index 9225b33..efaeb99 100644
Binary files a/examples/carbon/css-gridish/bx-grid.sketch and b/examples/carbon/css-gridish/bx-grid.sketch differ
diff --git a/examples/carbon/css-gridish/css/bx-grid-legacy.css b/examples/carbon/css-gridish/css/bx-grid-legacy.css
index f4c2c42..8dea787 100755
--- a/examples/carbon/css-gridish/css/bx-grid-legacy.css
+++ b/examples/carbon/css-gridish/css/bx-grid-legacy.css
@@ -10,6 +10,7 @@ body {
   margin-right: auto;
   max-width: 100rem;
   overflow-x: hidden;
+  padding-right: var(--scrollbar-width);
   width: 100vw; }
 
 .bx-container--left {
@@ -48,37 +49,39 @@ body {
   .bx-grid > * {
     height: 100%; } }
 
-@supports (display: grid) {
-  :root {
-    --bx-height-1: 0.5rem;
-    --bx-height-2: 1rem;
-    --bx-height-3: 1.5rem;
-    --bx-height-4: 2rem;
-    --bx-height-5: 2.5rem;
-    --bx-height-6: 3rem;
-    --bx-height-7: 3.5rem;
-    --bx-height-8: 4rem;
-    --bx-height-9: 4.5rem;
-    --bx-height-10: 5rem;
-    --bx-height-11: 5.5rem;
-    --bx-height-12: 6rem;
-    --bx-height-13: 6.5rem;
-    --bx-height-14: 7rem;
-    --bx-height-15: 7.5rem;
-    --bx-height-16: 8rem;
-    --bx-height-17: 8.5rem;
-    --bx-height-18: 9rem;
-    --bx-height-19: 9.5rem;
-    --bx-height-20: 10rem;
-    --bx-height-21: 10.5rem;
-    --bx-height-22: 11rem;
-    --bx-height-23: 11.5rem;
-    --bx-height-24: 12rem;
-    --bx-height-25: 12.5rem;
-    --bx-height-26: 13rem;
-    --bx-height-27: 13.5rem;
-    --bx-height-28: 14rem;
-    --bx-height-29: 14.5rem; } }
+:root {
+  --scrollbar-width: 0px; }
+  @supports (display: grid) {
+    :root {
+      --bx-height-1: 0.5rem;
+      --bx-height-2: 1rem;
+      --bx-height-3: 1.5rem;
+      --bx-height-4: 2rem;
+      --bx-height-5: 2.5rem;
+      --bx-height-6: 3rem;
+      --bx-height-7: 3.5rem;
+      --bx-height-8: 4rem;
+      --bx-height-9: 4.5rem;
+      --bx-height-10: 5rem;
+      --bx-height-11: 5.5rem;
+      --bx-height-12: 6rem;
+      --bx-height-13: 6.5rem;
+      --bx-height-14: 7rem;
+      --bx-height-15: 7.5rem;
+      --bx-height-16: 8rem;
+      --bx-height-17: 8.5rem;
+      --bx-height-18: 9rem;
+      --bx-height-19: 9.5rem;
+      --bx-height-20: 10rem;
+      --bx-height-21: 10.5rem;
+      --bx-height-22: 11rem;
+      --bx-height-23: 11.5rem;
+      --bx-height-24: 12rem;
+      --bx-height-25: 12.5rem;
+      --bx-height-26: 13rem;
+      --bx-height-27: 13.5rem;
+      --bx-height-28: 14rem;
+      --bx-height-29: 14.5rem; } }
 
 .bx-grid__height--sm--0 {
   height: 0;
@@ -261,17 +264,21 @@ body {
 
 .bx-grid {
   grid-auto-rows: minmax(0.5rem, min-content);
-  grid-template-columns: repeat(auto-fill, calc((100vw - 10vw) * 0.0833)); }
+  grid-template-columns: repeat(auto-fill, calc((100vw - 10vw) * 0.0833));
+  grid-template-columns: repeat(auto-fill, calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.0833)); }
   .bx-grid.bx-grid--fixed-columns {
     grid-template-columns: repeat(auto-fill, 1.66667rem); }
   .bx-grid.bx-grid--fluid-rows {
-    grid-auto-rows: calc((100vw - 10vw) * 0.0833); }
+    grid-auto-rows: calc((100vw - 10vw) * 0.0833);
+    grid-auto-rows: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.0833); }
   .bx-grid > * {
     grid-column: span 12; }
 
 .bx-grid__col--sm--1 {
   max-width: calc((100rem - 10vw) * 0.0833);
+  max-width: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.0833);
   width: calc((100vw - 10vw) * 0.0833);
+  width: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.0833);
   grid-column: span 1; }
   .bx-grid__col--sm--1.bx-grid > *:not([class*="bx-grid__col"]) {
     grid-column: span 1; }
@@ -280,12 +287,17 @@ body {
 > .bx-grid__height--sm--1 {
   grid-row: span 1;
   height: calc((100vw - 10vw) * 0.0833);
+  height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.0833);
   min-height: calc((100vw - 10vw) * 0.0833);
-  max-height: calc((100rem - 10vw) * 0.0833); }
+  min-height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.0833);
+  max-height: calc((100rem - 10vw) * 0.0833);
+  max-height: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.0833); }
 
 .bx-grid__col--sm--2 {
   max-width: calc((100rem - 10vw) * 0.1666);
+  max-width: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.1666);
   width: calc((100vw - 10vw) * 0.1666);
+  width: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.1666);
   grid-column: span 2; }
   .bx-grid__col--sm--2.bx-grid > *:not([class*="bx-grid__col"]) {
     grid-column: span 2; }
@@ -294,12 +306,17 @@ body {
 > .bx-grid__height--sm--2 {
   grid-row: span 2;
   height: calc((100vw - 10vw) * 0.1666);
+  height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.1666);
   min-height: calc((100vw - 10vw) * 0.1666);
-  max-height: calc((100rem - 10vw) * 0.1666); }
+  min-height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.1666);
+  max-height: calc((100rem - 10vw) * 0.1666);
+  max-height: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.1666); }
 
 .bx-grid__col--sm--3 {
   max-width: calc((100rem - 10vw) * 0.25);
+  max-width: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.25);
   width: calc((100vw - 10vw) * 0.25);
+  width: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.25);
   grid-column: span 3; }
   .bx-grid__col--sm--3.bx-grid > *:not([class*="bx-grid__col"]) {
     grid-column: span 3; }
@@ -308,12 +325,17 @@ body {
 > .bx-grid__height--sm--3 {
   grid-row: span 3;
   height: calc((100vw - 10vw) * 0.25);
+  height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.25);
   min-height: calc((100vw - 10vw) * 0.25);
-  max-height: calc((100rem - 10vw) * 0.25); }
+  min-height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.25);
+  max-height: calc((100rem - 10vw) * 0.25);
+  max-height: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.25); }
 
 .bx-grid__col--sm--4 {
   max-width: calc((100rem - 10vw) * 0.3333);
+  max-width: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.3333);
   width: calc((100vw - 10vw) * 0.3333);
+  width: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.3333);
   grid-column: span 4; }
   .bx-grid__col--sm--4.bx-grid > *:not([class*="bx-grid__col"]) {
     grid-column: span 4; }
@@ -322,12 +344,17 @@ body {
 > .bx-grid__height--sm--4 {
   grid-row: span 4;
   height: calc((100vw - 10vw) * 0.3333);
+  height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.3333);
   min-height: calc((100vw - 10vw) * 0.3333);
-  max-height: calc((100rem - 10vw) * 0.3333); }
+  min-height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.3333);
+  max-height: calc((100rem - 10vw) * 0.3333);
+  max-height: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.3333); }
 
 .bx-grid__col--sm--5 {
   max-width: calc((100rem - 10vw) * 0.4166);
+  max-width: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.4166);
   width: calc((100vw - 10vw) * 0.4166);
+  width: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.4166);
   grid-column: span 5; }
   .bx-grid__col--sm--5.bx-grid > *:not([class*="bx-grid__col"]) {
     grid-column: span 5; }
@@ -336,12 +363,17 @@ body {
 > .bx-grid__height--sm--5 {
   grid-row: span 5;
   height: calc((100vw - 10vw) * 0.4166);
+  height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.4166);
   min-height: calc((100vw - 10vw) * 0.4166);
-  max-height: calc((100rem - 10vw) * 0.4166); }
+  min-height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.4166);
+  max-height: calc((100rem - 10vw) * 0.4166);
+  max-height: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.4166); }
 
 .bx-grid__col--sm--6 {
   max-width: calc((100rem - 10vw) * 0.5);
+  max-width: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.5);
   width: calc((100vw - 10vw) * 0.5);
+  width: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.5);
   grid-column: span 6; }
   .bx-grid__col--sm--6.bx-grid > *:not([class*="bx-grid__col"]) {
     grid-column: span 6; }
@@ -350,12 +382,17 @@ body {
 > .bx-grid__height--sm--6 {
   grid-row: span 6;
   height: calc((100vw - 10vw) * 0.5);
+  height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.5);
   min-height: calc((100vw - 10vw) * 0.5);
-  max-height: calc((100rem - 10vw) * 0.5); }
+  min-height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.5);
+  max-height: calc((100rem - 10vw) * 0.5);
+  max-height: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.5); }
 
 .bx-grid__col--sm--7 {
   max-width: calc((100rem - 10vw) * 0.5833);
+  max-width: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.5833);
   width: calc((100vw - 10vw) * 0.5833);
+  width: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.5833);
   grid-column: span 7; }
   .bx-grid__col--sm--7.bx-grid > *:not([class*="bx-grid__col"]) {
     grid-column: span 7; }
@@ -364,12 +401,17 @@ body {
 > .bx-grid__height--sm--7 {
   grid-row: span 7;
   height: calc((100vw - 10vw) * 0.5833);
+  height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.5833);
   min-height: calc((100vw - 10vw) * 0.5833);
-  max-height: calc((100rem - 10vw) * 0.5833); }
+  min-height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.5833);
+  max-height: calc((100rem - 10vw) * 0.5833);
+  max-height: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.5833); }
 
 .bx-grid__col--sm--8 {
   max-width: calc((100rem - 10vw) * 0.6666);
+  max-width: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.6666);
   width: calc((100vw - 10vw) * 0.6666);
+  width: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.6666);
   grid-column: span 8; }
   .bx-grid__col--sm--8.bx-grid > *:not([class*="bx-grid__col"]) {
     grid-column: span 8; }
@@ -378,12 +420,17 @@ body {
 > .bx-grid__height--sm--8 {
   grid-row: span 8;
   height: calc((100vw - 10vw) * 0.6666);
+  height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.6666);
   min-height: calc((100vw - 10vw) * 0.6666);
-  max-height: calc((100rem - 10vw) * 0.6666); }
+  min-height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.6666);
+  max-height: calc((100rem - 10vw) * 0.6666);
+  max-height: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.6666); }
 
 .bx-grid__col--sm--9 {
   max-width: calc((100rem - 10vw) * 0.75);
+  max-width: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.75);
   width: calc((100vw - 10vw) * 0.75);
+  width: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.75);
   grid-column: span 9; }
   .bx-grid__col--sm--9.bx-grid > *:not([class*="bx-grid__col"]) {
     grid-column: span 9; }
@@ -392,12 +439,17 @@ body {
 > .bx-grid__height--sm--9 {
   grid-row: span 9;
   height: calc((100vw - 10vw) * 0.75);
+  height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.75);
   min-height: calc((100vw - 10vw) * 0.75);
-  max-height: calc((100rem - 10vw) * 0.75); }
+  min-height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.75);
+  max-height: calc((100rem - 10vw) * 0.75);
+  max-height: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.75); }
 
 .bx-grid__col--sm--10 {
   max-width: calc((100rem - 10vw) * 0.8333);
+  max-width: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.8333);
   width: calc((100vw - 10vw) * 0.8333);
+  width: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.8333);
   grid-column: span 10; }
   .bx-grid__col--sm--10.bx-grid > *:not([class*="bx-grid__col"]) {
     grid-column: span 10; }
@@ -406,12 +458,17 @@ body {
 > .bx-grid__height--sm--10 {
   grid-row: span 10;
   height: calc((100vw - 10vw) * 0.8333);
+  height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.8333);
   min-height: calc((100vw - 10vw) * 0.8333);
-  max-height: calc((100rem - 10vw) * 0.8333); }
+  min-height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.8333);
+  max-height: calc((100rem - 10vw) * 0.8333);
+  max-height: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.8333); }
 
 .bx-grid__col--sm--11 {
   max-width: calc((100rem - 10vw) * 0.9166);
+  max-width: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.9166);
   width: calc((100vw - 10vw) * 0.9166);
+  width: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.9166);
   grid-column: span 11; }
   .bx-grid__col--sm--11.bx-grid > *:not([class*="bx-grid__col"]) {
     grid-column: span 11; }
@@ -420,12 +477,17 @@ body {
 > .bx-grid__height--sm--11 {
   grid-row: span 11;
   height: calc((100vw - 10vw) * 0.9166);
+  height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.9166);
   min-height: calc((100vw - 10vw) * 0.9166);
-  max-height: calc((100rem - 10vw) * 0.9166); }
+  min-height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.9166);
+  max-height: calc((100rem - 10vw) * 0.9166);
+  max-height: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.9166); }
 
 .bx-grid__col--sm--12 {
   max-width: calc((100rem - 10vw) * 1);
+  max-width: calc(((100rem - var(--scrollbar-width)) - 10vw) * 1);
   width: calc((100vw - 10vw) * 1);
+  width: calc(((100vw - var(--scrollbar-width)) - 10vw) * 1);
   grid-column: span 12; }
   .bx-grid__col--sm--12.bx-grid > *:not([class*="bx-grid__col"]) {
     grid-column: span 12; }
@@ -434,8 +496,11 @@ body {
 > .bx-grid__height--sm--12 {
   grid-row: span 12;
   height: calc((100vw - 10vw) * 1);
+  height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 1);
   min-height: calc((100vw - 10vw) * 1);
-  max-height: calc((100rem - 10vw) * 1); }
+  min-height: calc(((100vw - var(--scrollbar-width)) - 10vw) * 1);
+  max-height: calc((100rem - 10vw) * 1);
+  max-height: calc(((100rem - var(--scrollbar-width)) - 10vw) * 1); }
 
 @supports (display: grid) {
   .bx-container {
@@ -499,11 +564,13 @@ body {
     padding-bottom: 0.625rem;
     padding-top: 0.625rem; }
   .bx-grid {
-    grid-template-columns: repeat(auto-fill, calc((100rem - 10vw) * 0.0833)); }
+    grid-template-columns: repeat(auto-fill, calc((100rem - 10vw) * 0.0833));
+    grid-template-columns: repeat(auto-fill, calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.0833)); }
     .bx-grid.bx-grid--fixed-columns {
       grid-template-columns: repeat(auto-fill, 8.33333rem); }
     .bx-grid.bx-grid--fluid-rows {
-      grid-auto-rows: calc((100rem - 10vw) * 0.0833); }
+      grid-auto-rows: calc((100rem - 10vw) * 0.0833);
+      grid-auto-rows: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.0833); }
   [class*="bx-grid__col--"] {
     min-width: 0; }
   @supports (display: grid) {
diff --git a/examples/carbon/css-gridish/css/bx-grid-legacy.min.css b/examples/carbon/css-gridish/css/bx-grid-legacy.min.css
index 81634a8..54ac910 100755
--- a/examples/carbon/css-gridish/css/bx-grid-legacy.min.css
+++ b/examples/carbon/css-gridish/css/bx-grid-legacy.min.css
@@ -1 +1 @@
-html{font-size:16px}body{margin:0}.bx-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;width:100vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-grid{align-items:flex-start;box-sizing:border-box;display:flex;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,calc((100vw - 10vw) * .0833))}.bx-grid>*{box-sizing:border-box;width:100%;grid-column:span 12}.bx-grid>* :last-child,.bx-grid>* :last-child>:last-child,.bx-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bx-padding]{box-sizing:border-box}@supports (display:grid){.bx-grid{align-items:unset}.bx-grid>*{width:initial;height:100%}:root{--bx-height-1:0.5rem;--bx-height-2:1rem;--bx-height-3:1.5rem;--bx-height-4:2rem;--bx-height-5:2.5rem;--bx-height-6:3rem;--bx-height-7:3.5rem;--bx-height-8:4rem;--bx-height-9:4.5rem;--bx-height-10:5rem;--bx-height-11:5.5rem;--bx-height-12:6rem;--bx-height-13:6.5rem;--bx-height-14:7rem;--bx-height-15:7.5rem;--bx-height-16:8rem;--bx-height-17:8.5rem;--bx-height-18:9rem;--bx-height-19:9.5rem;--bx-height-20:10rem;--bx-height-21:10.5rem;--bx-height-22:11rem;--bx-height-23:11.5rem;--bx-height-24:12rem;--bx-height-25:12.5rem;--bx-height-26:13rem;--bx-height-27:13.5rem;--bx-height-28:14rem;--bx-height-29:14.5rem}}.bx-grid__height--sm--0{height:0;min-height:0}.bx-grid__height--sm--1{grid-row:span 1;height:.5rem;min-height:.5rem}.bx-grid__height--sm--2{grid-row:span 2;height:1rem;min-height:1rem}.bx-grid__height--sm--3{grid-row:span 3;height:1.5rem;min-height:1.5rem}.bx-grid__height--sm--4{grid-row:span 4;height:2rem;min-height:2rem}.bx-grid__height--sm--5{grid-row:span 5;height:2.5rem;min-height:2.5rem}.bx-grid__height--sm--6{grid-row:span 6;height:3rem;min-height:3rem}.bx-grid__height--sm--7{grid-row:span 7;height:3.5rem;min-height:3.5rem}.bx-grid__height--sm--8{grid-row:span 8;height:4rem;min-height:4rem}.bx-grid__height--sm--9{grid-row:span 9;height:4.5rem;min-height:4.5rem}.bx-grid__height--sm--10{grid-row:span 10;height:5rem;min-height:5rem}.bx-grid__height--sm--11{grid-row:span 11;height:5.5rem;min-height:5.5rem}.bx-grid__height--sm--12{grid-row:span 12;height:6rem;min-height:6rem}.bx-grid__height--sm--13{grid-row:span 13;height:6.5rem;min-height:6.5rem}.bx-grid__height--sm--14{grid-row:span 14;height:7rem;min-height:7rem}.bx-grid__height--sm--15{grid-row:span 15;height:7.5rem;min-height:7.5rem}.bx-grid__height--sm--16{grid-row:span 16;height:8rem;min-height:8rem}.bx-grid__height--sm--17{grid-row:span 17;height:8.5rem;min-height:8.5rem}.bx-grid__height--sm--18{grid-row:span 18;height:9rem;min-height:9rem}.bx-grid__height--sm--19{grid-row:span 19;height:9.5rem;min-height:9.5rem}.bx-grid__height--sm--20{grid-row:span 20;height:10rem;min-height:10rem}.bx-grid__height--sm--21{grid-row:span 21;height:10.5rem;min-height:10.5rem}.bx-grid__height--sm--22{grid-row:span 22;height:11rem;min-height:11rem}.bx-grid__height--sm--23{grid-row:span 23;height:11.5rem;min-height:11.5rem}.bx-grid__height--sm--24{grid-row:span 24;height:12rem;min-height:12rem}.bx-grid__height--sm--25{grid-row:span 25;height:12.5rem;min-height:12.5rem}.bx-grid__height--sm--26{grid-row:span 26;height:13rem;min-height:13rem}.bx-grid__height--sm--27{grid-row:span 27;height:13.5rem;min-height:13.5rem}.bx-grid__height--sm--28{grid-row:span 28;height:14rem;min-height:14rem}.bx-grid__height--sm--29{grid-row:span 29;height:14.5rem;min-height:14.5rem}[class*=bx-grid__col--sm--]{display:block}.bx-grid__col--sm--0,.bx-grid__col--sm--0--only{display:none}.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,1.66667rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100vw - 10vw) * .0833)}.bx-grid__col--sm--1{max-width:calc((100rem - 10vw) * .0833);width:calc((100vw - 10vw) * .0833);grid-column:span 1}.bx-grid__col--sm--1.bx-grid>:not([class*=bx-grid__col]){grid-column:span 1}.bx-grid--fluid-rows>.bx-grid__height--sm--1{grid-row:span 1;height:calc((100vw - 10vw) * .0833);min-height:calc((100vw - 10vw) * .0833);max-height:calc((100rem - 10vw) * .0833)}.bx-grid__col--sm--2{max-width:calc((100rem - 10vw) * .1666);width:calc((100vw - 10vw) * .1666);grid-column:span 2}.bx-grid__col--sm--2.bx-grid>:not([class*=bx-grid__col]){grid-column:span 2}.bx-grid--fluid-rows>.bx-grid__height--sm--2{grid-row:span 2;height:calc((100vw - 10vw) * .1666);min-height:calc((100vw - 10vw) * .1666);max-height:calc((100rem - 10vw) * .1666)}.bx-grid__col--sm--3{max-width:calc((100rem - 10vw) * .25);width:calc((100vw - 10vw) * .25);grid-column:span 3}.bx-grid__col--sm--3.bx-grid>:not([class*=bx-grid__col]){grid-column:span 3}.bx-grid--fluid-rows>.bx-grid__height--sm--3{grid-row:span 3;height:calc((100vw - 10vw) * .25);min-height:calc((100vw - 10vw) * .25);max-height:calc((100rem - 10vw) * .25)}.bx-grid__col--sm--4{max-width:calc((100rem - 10vw) * .3333);width:calc((100vw - 10vw) * .3333);grid-column:span 4}.bx-grid__col--sm--4.bx-grid>:not([class*=bx-grid__col]){grid-column:span 4}.bx-grid--fluid-rows>.bx-grid__height--sm--4{grid-row:span 4;height:calc((100vw - 10vw) * .3333);min-height:calc((100vw - 10vw) * .3333);max-height:calc((100rem - 10vw) * .3333)}.bx-grid__col--sm--5{max-width:calc((100rem - 10vw) * .4166);width:calc((100vw - 10vw) * .4166);grid-column:span 5}.bx-grid__col--sm--5.bx-grid>:not([class*=bx-grid__col]){grid-column:span 5}.bx-grid--fluid-rows>.bx-grid__height--sm--5{grid-row:span 5;height:calc((100vw - 10vw) * .4166);min-height:calc((100vw - 10vw) * .4166);max-height:calc((100rem - 10vw) * .4166)}.bx-grid__col--sm--6{max-width:calc((100rem - 10vw) * .5);width:calc((100vw - 10vw) * .5);grid-column:span 6}.bx-grid__col--sm--6.bx-grid>:not([class*=bx-grid__col]){grid-column:span 6}.bx-grid--fluid-rows>.bx-grid__height--sm--6{grid-row:span 6;height:calc((100vw - 10vw) * .5);min-height:calc((100vw - 10vw) * .5);max-height:calc((100rem - 10vw) * .5)}.bx-grid__col--sm--7{max-width:calc((100rem - 10vw) * .5833);width:calc((100vw - 10vw) * .5833);grid-column:span 7}.bx-grid__col--sm--7.bx-grid>:not([class*=bx-grid__col]){grid-column:span 7}.bx-grid--fluid-rows>.bx-grid__height--sm--7{grid-row:span 7;height:calc((100vw - 10vw) * .5833);min-height:calc((100vw - 10vw) * .5833);max-height:calc((100rem - 10vw) * .5833)}.bx-grid__col--sm--8{max-width:calc((100rem - 10vw) * .6666);width:calc((100vw - 10vw) * .6666);grid-column:span 8}.bx-grid__col--sm--8.bx-grid>:not([class*=bx-grid__col]){grid-column:span 8}.bx-grid--fluid-rows>.bx-grid__height--sm--8{grid-row:span 8;height:calc((100vw - 10vw) * .6666);min-height:calc((100vw - 10vw) * .6666);max-height:calc((100rem - 10vw) * .6666)}.bx-grid__col--sm--9{max-width:calc((100rem - 10vw) * .75);width:calc((100vw - 10vw) * .75);grid-column:span 9}.bx-grid__col--sm--9.bx-grid>:not([class*=bx-grid__col]){grid-column:span 9}.bx-grid--fluid-rows>.bx-grid__height--sm--9{grid-row:span 9;height:calc((100vw - 10vw) * .75);min-height:calc((100vw - 10vw) * .75);max-height:calc((100rem - 10vw) * .75)}.bx-grid__col--sm--10{max-width:calc((100rem - 10vw) * .8333);width:calc((100vw - 10vw) * .8333);grid-column:span 10}.bx-grid__col--sm--10.bx-grid>:not([class*=bx-grid__col]){grid-column:span 10}.bx-grid--fluid-rows>.bx-grid__height--sm--10{grid-row:span 10;height:calc((100vw - 10vw) * .8333);min-height:calc((100vw - 10vw) * .8333);max-height:calc((100rem - 10vw) * .8333)}.bx-grid__col--sm--11{max-width:calc((100rem - 10vw) * .9166);width:calc((100vw - 10vw) * .9166);grid-column:span 11}.bx-grid__col--sm--11.bx-grid>:not([class*=bx-grid__col]){grid-column:span 11}.bx-grid--fluid-rows>.bx-grid__height--sm--11{grid-row:span 11;height:calc((100vw - 10vw) * .9166);min-height:calc((100vw - 10vw) * .9166);max-height:calc((100rem - 10vw) * .9166)}.bx-grid__col--sm--12{max-width:calc((100rem - 10vw) * 1);width:calc((100vw - 10vw) * 1);grid-column:span 12}.bx-grid__col--sm--12.bx-grid>:not([class*=bx-grid__col]){grid-column:span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--12{grid-row:span 12;height:calc((100vw - 10vw) * 1);min-height:calc((100vw - 10vw) * 1);max-height:calc((100rem - 10vw) * 1)}@supports (display:grid){.bx-container{margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}}@media screen and (min-width:100rem){.bx-grid__col--sm--0--only,[class*=bx-grid__col--xxl--]{display:block}.bx-grid__col--xxl--0,.bx-grid__col--xxl--0--only{display:none}.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid{grid-template-columns:repeat(auto-fill,calc((100rem - 10vw) * .0833))}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100rem - 10vw) * .0833)}[class*=bx-grid__col--]{min-width:0}@supports (display:grid){.bx-container{margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}}}@supports (display:grid){.bx-grid>*,.bx-grid>[class*=bx-grid__col--]{min-width:initial;max-width:initial;width:initial}.bx-grid>.bx-grid,.bx-grid>[class*=bx-grid__col--].bx-grid{display:grid}.bx-grid>[class*=bx-grid__height--]{height:unset;max-height:unset;min-height:initial}}.bx-grid>script{display:none}
\ No newline at end of file
+html{font-size:16px}body{margin:0}.bx-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-grid{align-items:flex-start;box-sizing:border-box;display:flex;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,calc((100vw - 10vw) * .0833));grid-template-columns:repeat(auto-fill,calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833))}.bx-grid>*{box-sizing:border-box;width:100%;grid-column:span 12}.bx-grid>* :last-child,.bx-grid>* :last-child>:last-child,.bx-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bx-padding]{box-sizing:border-box}:root{--scrollbar-width:0px}@supports (display:grid){.bx-grid{align-items:unset}.bx-grid>*{width:initial;height:100%}:root{--bx-height-1:0.5rem;--bx-height-2:1rem;--bx-height-3:1.5rem;--bx-height-4:2rem;--bx-height-5:2.5rem;--bx-height-6:3rem;--bx-height-7:3.5rem;--bx-height-8:4rem;--bx-height-9:4.5rem;--bx-height-10:5rem;--bx-height-11:5.5rem;--bx-height-12:6rem;--bx-height-13:6.5rem;--bx-height-14:7rem;--bx-height-15:7.5rem;--bx-height-16:8rem;--bx-height-17:8.5rem;--bx-height-18:9rem;--bx-height-19:9.5rem;--bx-height-20:10rem;--bx-height-21:10.5rem;--bx-height-22:11rem;--bx-height-23:11.5rem;--bx-height-24:12rem;--bx-height-25:12.5rem;--bx-height-26:13rem;--bx-height-27:13.5rem;--bx-height-28:14rem;--bx-height-29:14.5rem}}.bx-grid__height--sm--0{height:0;min-height:0}.bx-grid__height--sm--1{grid-row:span 1;height:.5rem;min-height:.5rem}.bx-grid__height--sm--2{grid-row:span 2;height:1rem;min-height:1rem}.bx-grid__height--sm--3{grid-row:span 3;height:1.5rem;min-height:1.5rem}.bx-grid__height--sm--4{grid-row:span 4;height:2rem;min-height:2rem}.bx-grid__height--sm--5{grid-row:span 5;height:2.5rem;min-height:2.5rem}.bx-grid__height--sm--6{grid-row:span 6;height:3rem;min-height:3rem}.bx-grid__height--sm--7{grid-row:span 7;height:3.5rem;min-height:3.5rem}.bx-grid__height--sm--8{grid-row:span 8;height:4rem;min-height:4rem}.bx-grid__height--sm--9{grid-row:span 9;height:4.5rem;min-height:4.5rem}.bx-grid__height--sm--10{grid-row:span 10;height:5rem;min-height:5rem}.bx-grid__height--sm--11{grid-row:span 11;height:5.5rem;min-height:5.5rem}.bx-grid__height--sm--12{grid-row:span 12;height:6rem;min-height:6rem}.bx-grid__height--sm--13{grid-row:span 13;height:6.5rem;min-height:6.5rem}.bx-grid__height--sm--14{grid-row:span 14;height:7rem;min-height:7rem}.bx-grid__height--sm--15{grid-row:span 15;height:7.5rem;min-height:7.5rem}.bx-grid__height--sm--16{grid-row:span 16;height:8rem;min-height:8rem}.bx-grid__height--sm--17{grid-row:span 17;height:8.5rem;min-height:8.5rem}.bx-grid__height--sm--18{grid-row:span 18;height:9rem;min-height:9rem}.bx-grid__height--sm--19{grid-row:span 19;height:9.5rem;min-height:9.5rem}.bx-grid__height--sm--20{grid-row:span 20;height:10rem;min-height:10rem}.bx-grid__height--sm--21{grid-row:span 21;height:10.5rem;min-height:10.5rem}.bx-grid__height--sm--22{grid-row:span 22;height:11rem;min-height:11rem}.bx-grid__height--sm--23{grid-row:span 23;height:11.5rem;min-height:11.5rem}.bx-grid__height--sm--24{grid-row:span 24;height:12rem;min-height:12rem}.bx-grid__height--sm--25{grid-row:span 25;height:12.5rem;min-height:12.5rem}.bx-grid__height--sm--26{grid-row:span 26;height:13rem;min-height:13rem}.bx-grid__height--sm--27{grid-row:span 27;height:13.5rem;min-height:13.5rem}.bx-grid__height--sm--28{grid-row:span 28;height:14rem;min-height:14rem}.bx-grid__height--sm--29{grid-row:span 29;height:14.5rem;min-height:14.5rem}[class*=bx-grid__col--sm--]{display:block}.bx-grid__col--sm--0,.bx-grid__col--sm--0--only{display:none}.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,1.66667rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100vw - 10vw) * .0833);grid-auto-rows:calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833)}.bx-grid__col--sm--1{max-width:calc((100rem - 10vw) * .0833);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833);width:calc((100vw - 10vw) * .0833);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833);grid-column:span 1}.bx-grid__col--sm--1.bx-grid>:not([class*=bx-grid__col]){grid-column:span 1}.bx-grid--fluid-rows>.bx-grid__height--sm--1{grid-row:span 1;height:calc((100vw - 10vw) * .0833);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833);min-height:calc((100vw - 10vw) * .0833);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833);max-height:calc((100rem - 10vw) * .0833);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833)}.bx-grid__col--sm--2{max-width:calc((100rem - 10vw) * .1666);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .1666);width:calc((100vw - 10vw) * .1666);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .1666);grid-column:span 2}.bx-grid__col--sm--2.bx-grid>:not([class*=bx-grid__col]){grid-column:span 2}.bx-grid--fluid-rows>.bx-grid__height--sm--2{grid-row:span 2;height:calc((100vw - 10vw) * .1666);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .1666);min-height:calc((100vw - 10vw) * .1666);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .1666);max-height:calc((100rem - 10vw) * .1666);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .1666)}.bx-grid__col--sm--3{max-width:calc((100rem - 10vw) * .25);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .25);width:calc((100vw - 10vw) * .25);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .25);grid-column:span 3}.bx-grid__col--sm--3.bx-grid>:not([class*=bx-grid__col]){grid-column:span 3}.bx-grid--fluid-rows>.bx-grid__height--sm--3{grid-row:span 3;height:calc((100vw - 10vw) * .25);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .25);min-height:calc((100vw - 10vw) * .25);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .25);max-height:calc((100rem - 10vw) * .25);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .25)}.bx-grid__col--sm--4{max-width:calc((100rem - 10vw) * .3333);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .3333);width:calc((100vw - 10vw) * .3333);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .3333);grid-column:span 4}.bx-grid__col--sm--4.bx-grid>:not([class*=bx-grid__col]){grid-column:span 4}.bx-grid--fluid-rows>.bx-grid__height--sm--4{grid-row:span 4;height:calc((100vw - 10vw) * .3333);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .3333);min-height:calc((100vw - 10vw) * .3333);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .3333);max-height:calc((100rem - 10vw) * .3333);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .3333)}.bx-grid__col--sm--5{max-width:calc((100rem - 10vw) * .4166);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .4166);width:calc((100vw - 10vw) * .4166);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .4166);grid-column:span 5}.bx-grid__col--sm--5.bx-grid>:not([class*=bx-grid__col]){grid-column:span 5}.bx-grid--fluid-rows>.bx-grid__height--sm--5{grid-row:span 5;height:calc((100vw - 10vw) * .4166);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .4166);min-height:calc((100vw - 10vw) * .4166);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .4166);max-height:calc((100rem - 10vw) * .4166);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .4166)}.bx-grid__col--sm--6{max-width:calc((100rem - 10vw) * .5);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .5);width:calc((100vw - 10vw) * .5);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5);grid-column:span 6}.bx-grid__col--sm--6.bx-grid>:not([class*=bx-grid__col]){grid-column:span 6}.bx-grid--fluid-rows>.bx-grid__height--sm--6{grid-row:span 6;height:calc((100vw - 10vw) * .5);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5);min-height:calc((100vw - 10vw) * .5);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5);max-height:calc((100rem - 10vw) * .5);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .5)}.bx-grid__col--sm--7{max-width:calc((100rem - 10vw) * .5833);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .5833);width:calc((100vw - 10vw) * .5833);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5833);grid-column:span 7}.bx-grid__col--sm--7.bx-grid>:not([class*=bx-grid__col]){grid-column:span 7}.bx-grid--fluid-rows>.bx-grid__height--sm--7{grid-row:span 7;height:calc((100vw - 10vw) * .5833);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5833);min-height:calc((100vw - 10vw) * .5833);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .5833);max-height:calc((100rem - 10vw) * .5833);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .5833)}.bx-grid__col--sm--8{max-width:calc((100rem - 10vw) * .6666);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .6666);width:calc((100vw - 10vw) * .6666);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .6666);grid-column:span 8}.bx-grid__col--sm--8.bx-grid>:not([class*=bx-grid__col]){grid-column:span 8}.bx-grid--fluid-rows>.bx-grid__height--sm--8{grid-row:span 8;height:calc((100vw - 10vw) * .6666);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .6666);min-height:calc((100vw - 10vw) * .6666);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .6666);max-height:calc((100rem - 10vw) * .6666);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .6666)}.bx-grid__col--sm--9{max-width:calc((100rem - 10vw) * .75);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .75);width:calc((100vw - 10vw) * .75);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .75);grid-column:span 9}.bx-grid__col--sm--9.bx-grid>:not([class*=bx-grid__col]){grid-column:span 9}.bx-grid--fluid-rows>.bx-grid__height--sm--9{grid-row:span 9;height:calc((100vw - 10vw) * .75);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .75);min-height:calc((100vw - 10vw) * .75);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .75);max-height:calc((100rem - 10vw) * .75);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .75)}.bx-grid__col--sm--10{max-width:calc((100rem - 10vw) * .8333);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .8333);width:calc((100vw - 10vw) * .8333);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .8333);grid-column:span 10}.bx-grid__col--sm--10.bx-grid>:not([class*=bx-grid__col]){grid-column:span 10}.bx-grid--fluid-rows>.bx-grid__height--sm--10{grid-row:span 10;height:calc((100vw - 10vw) * .8333);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .8333);min-height:calc((100vw - 10vw) * .8333);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .8333);max-height:calc((100rem - 10vw) * .8333);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .8333)}.bx-grid__col--sm--11{max-width:calc((100rem - 10vw) * .9166);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * .9166);width:calc((100vw - 10vw) * .9166);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * .9166);grid-column:span 11}.bx-grid__col--sm--11.bx-grid>:not([class*=bx-grid__col]){grid-column:span 11}.bx-grid--fluid-rows>.bx-grid__height--sm--11{grid-row:span 11;height:calc((100vw - 10vw) * .9166);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .9166);min-height:calc((100vw - 10vw) * .9166);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * .9166);max-height:calc((100rem - 10vw) * .9166);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * .9166)}.bx-grid__col--sm--12{max-width:calc((100rem - 10vw) * 1);max-width:calc(((100rem - var(--scrollbar-width)) - 10vw) * 1);width:calc((100vw - 10vw) * 1);width:calc(((100vw - var(--scrollbar-width)) - 10vw) * 1);grid-column:span 12}.bx-grid__col--sm--12.bx-grid>:not([class*=bx-grid__col]){grid-column:span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--12{grid-row:span 12;height:calc((100vw - 10vw) * 1);height:calc(((100vw - var(--scrollbar-width)) - 10vw) * 1);min-height:calc((100vw - 10vw) * 1);min-height:calc(((100vw - var(--scrollbar-width)) - 10vw) * 1);max-height:calc((100rem - 10vw) * 1);max-height:calc(((100rem - var(--scrollbar-width)) - 10vw) * 1)}@supports (display:grid){.bx-container{margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}}@media screen and (min-width:100rem){.bx-grid__col--sm--0--only,[class*=bx-grid__col--xxl--]{display:block}.bx-grid__col--xxl--0,.bx-grid__col--xxl--0--only{display:none}.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid{grid-template-columns:repeat(auto-fill,calc((100rem - 10vw) * .0833));grid-template-columns:repeat(auto-fill,calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833))}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100rem - 10vw) * .0833);grid-auto-rows:calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833)}[class*=bx-grid__col--]{min-width:0}@supports (display:grid){.bx-container{margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}}}@supports (display:grid){.bx-grid>*,.bx-grid>[class*=bx-grid__col--]{min-width:initial;max-width:initial;width:initial}.bx-grid>.bx-grid,.bx-grid>[class*=bx-grid__col--].bx-grid{display:grid}.bx-grid>[class*=bx-grid__height--]{height:unset;max-height:unset;min-height:initial}}.bx-grid>script{display:none}
\ No newline at end of file
diff --git a/examples/carbon/css-gridish/css/bx-grid-minimal.css b/examples/carbon/css-gridish/css/bx-grid-minimal.css
new file mode 100644
index 0000000..2d04842
--- /dev/null
+++ b/examples/carbon/css-gridish/css/bx-grid-minimal.css
@@ -0,0 +1,210 @@
+html {
+  font-size: 16px; }
+
+body {
+  margin: 0; }
+
+.bx-container {
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100rem;
+  overflow-x: hidden;
+  padding-right: var(--scrollbar-width);
+  width: 100vw; }
+
+.bx-container--left {
+  margin-left: 0; }
+
+.bx-container--right {
+  margin-right: 0; }
+
+.bx-grid {
+  align-items: flex-start;
+  box-sizing: border-box;
+  display: grid;
+  flex-wrap: wrap;
+  position: relative; }
+  .bx-grid > * {
+    box-sizing: border-box; }
+    .bx-grid > * :last-child,
+    .bx-grid > * :last-child > :last-child,
+    .bx-grid > * :last-child > :last-child > :last-child {
+      margin-bottom: 0; }
+
+[class*="bx-padding"] {
+  box-sizing: border-box; }
+
+@supports (display: grid) {
+  .bx-grid > * {
+    height: 100%; } }
+
+:root {
+  --scrollbar-width: 0px;
+  --bx-height-1: 0.5rem;
+  --bx-height-2: 1rem;
+  --bx-height-3: 1.5rem;
+  --bx-height-4: 2rem;
+  --bx-height-5: 2.5rem;
+  --bx-height-6: 3rem;
+  --bx-height-7: 3.5rem;
+  --bx-height-8: 4rem;
+  --bx-height-9: 4.5rem;
+  --bx-height-10: 5rem;
+  --bx-height-11: 5.5rem;
+  --bx-height-12: 6rem;
+  --bx-height-13: 6.5rem;
+  --bx-height-14: 7rem;
+  --bx-height-15: 7.5rem;
+  --bx-height-16: 8rem;
+  --bx-height-17: 8.5rem;
+  --bx-height-18: 9rem;
+  --bx-height-19: 9.5rem;
+  --bx-height-20: 10rem;
+  --bx-height-21: 10.5rem;
+  --bx-height-22: 11rem;
+  --bx-height-23: 11.5rem;
+  --bx-height-24: 12rem;
+  --bx-height-25: 12.5rem;
+  --bx-height-26: 13rem;
+  --bx-height-27: 13.5rem;
+  --bx-height-28: 14rem;
+  --bx-height-29: 14.5rem; }
+
+.bx-padding {
+  padding: 0.625rem; }
+
+.bx-padding--bottom {
+  padding-bottom: 0.625rem; }
+
+.bx-padding--left {
+  padding-left: 0.625rem; }
+
+.bx-padding--right {
+  padding-right: 0.625rem; }
+
+.bx-padding--top {
+  padding-top: 0.625rem; }
+
+.bx-padding--horizontal {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem; }
+
+.bx-padding--vertical {
+  padding-bottom: 0.625rem;
+  padding-top: 0.625rem; }
+
+.bx-grid {
+  grid-auto-rows: minmax(0.5rem, min-content);
+  grid-template-columns: repeat(auto-fill, calc((100vw - 10vw) * 0.0833));
+  grid-template-columns: repeat(auto-fill, calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.0833)); }
+  .bx-grid.bx-grid--fixed-columns {
+    grid-template-columns: repeat(auto-fill, 1.66667rem); }
+  .bx-grid.bx-grid--fluid-rows {
+    grid-auto-rows: calc((100vw - 10vw) * 0.0833);
+    grid-auto-rows: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.0833); }
+  .bx-grid > * {
+    grid-column: span 12; }
+
+.bx-container {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 5vw;
+  padding-right: 5vw; }
+
+.bx-container--left {
+  margin-left: 0; }
+
+.bx-container--right {
+  margin-right: 0; }
+
+.bx-container__bleed--sm,
+.bx-container__bleed--sm--left,
+.bx-container__break--sm,
+.bx-container__break--sm--left {
+  margin-left: -5vw; }
+
+.bx-container__bleed--sm,
+.bx-container__bleed--sm--right,
+.bx-container__break--sm,
+.bx-container__break--sm--right {
+  margin-right: -5vw; }
+
+.bx-container__bleed--sm,
+.bx-container__bleed--sm--left {
+  padding-left: 5vw; }
+  .bx-container__bleed--sm.bx-padding, .bx-container__bleed--sm.bx-padding--horizontal, .bx-container__bleed--sm.bx-padding--left,
+  .bx-container__bleed--sm--left.bx-padding,
+  .bx-container__bleed--sm--left.bx-padding--horizontal,
+  .bx-container__bleed--sm--left.bx-padding--left {
+    padding-left: calc(5vw + 0.625rem); }
+
+.bx-container__bleed--sm,
+.bx-container__bleed--sm--right {
+  padding-right: 5vw; }
+  .bx-container__bleed--sm.bx-padding, .bx-container__bleed--sm.bx-padding--horizontal, .bx-container__bleed--sm.bx-padding--right,
+  .bx-container__bleed--sm--right.bx-padding,
+  .bx-container__bleed--sm--right.bx-padding--horizontal,
+  .bx-container__bleed--sm--right.bx-padding--right {
+    padding-right: calc(5vw + 0.625rem); }
+
+@media screen and (min-width: 100rem) {
+  .bx-padding {
+    padding: 0.625rem; }
+  .bx-padding--bottom {
+    padding-bottom: 0.625rem; }
+  .bx-padding--left {
+    padding-left: 0.625rem; }
+  .bx-padding--right {
+    padding-right: 0.625rem; }
+  .bx-padding--top {
+    padding-top: 0.625rem; }
+  .bx-padding--horizontal {
+    padding-left: 0.625rem;
+    padding-right: 0.625rem; }
+  .bx-padding--vertical {
+    padding-bottom: 0.625rem;
+    padding-top: 0.625rem; }
+  .bx-grid {
+    grid-template-columns: repeat(auto-fill, calc((100rem - 10vw) * 0.0833));
+    grid-template-columns: repeat(auto-fill, calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.0833)); }
+    .bx-grid.bx-grid--fixed-columns {
+      grid-template-columns: repeat(auto-fill, 8.33333rem); }
+    .bx-grid.bx-grid--fluid-rows {
+      grid-auto-rows: calc((100rem - 10vw) * 0.0833);
+      grid-auto-rows: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.0833); }
+  .bx-container {
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 5vw;
+    padding-right: 5vw; }
+  .bx-container--left {
+    margin-left: 0; }
+  .bx-container--right {
+    margin-right: 0; }
+  .bx-container__bleed--sm,
+  .bx-container__bleed--sm--left,
+  .bx-container__break--sm,
+  .bx-container__break--sm--left {
+    margin-left: -5vw; }
+  .bx-container__bleed--sm,
+  .bx-container__bleed--sm--right,
+  .bx-container__break--sm,
+  .bx-container__break--sm--right {
+    margin-right: -5vw; }
+  .bx-container__bleed--sm,
+  .bx-container__bleed--sm--left {
+    padding-left: 5vw; }
+    .bx-container__bleed--sm.bx-padding, .bx-container__bleed--sm.bx-padding--horizontal, .bx-container__bleed--sm.bx-padding--left,
+    .bx-container__bleed--sm--left.bx-padding,
+    .bx-container__bleed--sm--left.bx-padding--horizontal,
+    .bx-container__bleed--sm--left.bx-padding--left {
+      padding-left: calc(5vw + 0.625rem); }
+  .bx-container__bleed--sm,
+  .bx-container__bleed--sm--right {
+    padding-right: 5vw; }
+    .bx-container__bleed--sm.bx-padding, .bx-container__bleed--sm.bx-padding--horizontal, .bx-container__bleed--sm.bx-padding--right,
+    .bx-container__bleed--sm--right.bx-padding,
+    .bx-container__bleed--sm--right.bx-padding--horizontal,
+    .bx-container__bleed--sm--right.bx-padding--right {
+      padding-right: calc(5vw + 0.625rem); } }
diff --git a/examples/carbon/css-gridish/css/bx-grid-minimal.min.css b/examples/carbon/css-gridish/css/bx-grid-minimal.min.css
new file mode 100644
index 0000000..324015e
--- /dev/null
+++ b/examples/carbon/css-gridish/css/bx-grid-minimal.min.css
@@ -0,0 +1 @@
+html{font-size:16px}body{margin:0}.bx-container{box-sizing:border-box;max-width:100rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.bx-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,calc((100vw - 10vw) * .0833));grid-template-columns:repeat(auto-fill,calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833))}.bx-grid>*{box-sizing:border-box;grid-column:span 12}.bx-grid>* :last-child,.bx-grid>* :last-child>:last-child,.bx-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bx-padding]{box-sizing:border-box}@supports (display:grid){.bx-grid>*{height:100%}}:root{--scrollbar-width:0px;--bx-height-1:0.5rem;--bx-height-2:1rem;--bx-height-3:1.5rem;--bx-height-4:2rem;--bx-height-5:2.5rem;--bx-height-6:3rem;--bx-height-7:3.5rem;--bx-height-8:4rem;--bx-height-9:4.5rem;--bx-height-10:5rem;--bx-height-11:5.5rem;--bx-height-12:6rem;--bx-height-13:6.5rem;--bx-height-14:7rem;--bx-height-15:7.5rem;--bx-height-16:8rem;--bx-height-17:8.5rem;--bx-height-18:9rem;--bx-height-19:9.5rem;--bx-height-20:10rem;--bx-height-21:10.5rem;--bx-height-22:11rem;--bx-height-23:11.5rem;--bx-height-24:12rem;--bx-height-25:12.5rem;--bx-height-26:13rem;--bx-height-27:13.5rem;--bx-height-28:14rem;--bx-height-29:14.5rem}.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,1.66667rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100vw - 10vw) * .0833);grid-auto-rows:calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833)}.bx-container{margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}@media screen and (min-width:100rem){.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid{grid-template-columns:repeat(auto-fill,calc((100rem - 10vw) * .0833));grid-template-columns:repeat(auto-fill,calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833))}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100rem - 10vw) * .0833);grid-auto-rows:calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833)}.bx-container{margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}}
\ No newline at end of file
diff --git a/examples/carbon/css-gridish/css/bx-grid.css b/examples/carbon/css-gridish/css/bx-grid.css
index d8f3a01..36a7c4c 100755
--- a/examples/carbon/css-gridish/css/bx-grid.css
+++ b/examples/carbon/css-gridish/css/bx-grid.css
@@ -10,6 +10,7 @@ body {
   margin-right: auto;
   max-width: 100rem;
   overflow-x: hidden;
+  padding-right: var(--scrollbar-width);
   width: 100vw; }
 
 .bx-container--left {
@@ -39,6 +40,7 @@ body {
     height: 100%; } }
 
 :root {
+  --scrollbar-width: 0px;
   --bx-height-1: 0.5rem;
   --bx-height-2: 1rem;
   --bx-height-3: 1.5rem;
@@ -192,11 +194,13 @@ body {
 
 .bx-grid {
   grid-auto-rows: minmax(0.5rem, min-content);
-  grid-template-columns: repeat(auto-fill, calc((100vw - 10vw) * 0.0833)); }
+  grid-template-columns: repeat(auto-fill, calc((100vw - 10vw) * 0.0833));
+  grid-template-columns: repeat(auto-fill, calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.0833)); }
   .bx-grid.bx-grid--fixed-columns {
     grid-template-columns: repeat(auto-fill, 1.66667rem); }
   .bx-grid.bx-grid--fluid-rows {
-    grid-auto-rows: calc((100vw - 10vw) * 0.0833); }
+    grid-auto-rows: calc((100vw - 10vw) * 0.0833);
+    grid-auto-rows: calc(((100vw - var(--scrollbar-width)) - 10vw) * 0.0833); }
   .bx-grid > * {
     grid-column: span 12; }
 
@@ -375,11 +379,13 @@ body {
     padding-bottom: 0.625rem;
     padding-top: 0.625rem; }
   .bx-grid {
-    grid-template-columns: repeat(auto-fill, calc((100rem - 10vw) * 0.0833)); }
+    grid-template-columns: repeat(auto-fill, calc((100rem - 10vw) * 0.0833));
+    grid-template-columns: repeat(auto-fill, calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.0833)); }
     .bx-grid.bx-grid--fixed-columns {
       grid-template-columns: repeat(auto-fill, 8.33333rem); }
     .bx-grid.bx-grid--fluid-rows {
-      grid-auto-rows: calc((100rem - 10vw) * 0.0833); }
+      grid-auto-rows: calc((100rem - 10vw) * 0.0833);
+      grid-auto-rows: calc(((100rem - var(--scrollbar-width)) - 10vw) * 0.0833); }
   .bx-container {
     margin-left: auto;
     margin-right: auto;
diff --git a/examples/carbon/css-gridish/css/bx-grid.min.css b/examples/carbon/css-gridish/css/bx-grid.min.css
index 1f972e4..1dbce62 100755
--- a/examples/carbon/css-gridish/css/bx-grid.min.css
+++ b/examples/carbon/css-gridish/css/bx-grid.min.css
@@ -1 +1 @@
-html{font-size:16px}body{margin:0}.bx-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,calc((100vw - 10vw) * .0833))}.bx-grid>*{box-sizing:border-box;grid-column:span 12}.bx-grid>* :last-child,.bx-grid>* :last-child>:last-child,.bx-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bx-padding]{box-sizing:border-box}@supports (display:grid){.bx-grid>*{height:100%}}:root{--bx-height-1:0.5rem;--bx-height-2:1rem;--bx-height-3:1.5rem;--bx-height-4:2rem;--bx-height-5:2.5rem;--bx-height-6:3rem;--bx-height-7:3.5rem;--bx-height-8:4rem;--bx-height-9:4.5rem;--bx-height-10:5rem;--bx-height-11:5.5rem;--bx-height-12:6rem;--bx-height-13:6.5rem;--bx-height-14:7rem;--bx-height-15:7.5rem;--bx-height-16:8rem;--bx-height-17:8.5rem;--bx-height-18:9rem;--bx-height-19:9.5rem;--bx-height-20:10rem;--bx-height-21:10.5rem;--bx-height-22:11rem;--bx-height-23:11.5rem;--bx-height-24:12rem;--bx-height-25:12.5rem;--bx-height-26:13rem;--bx-height-27:13.5rem;--bx-height-28:14rem;--bx-height-29:14.5rem}.bx-grid__height--sm--0{height:0;min-height:0}.bx-grid__height--sm--1{grid-row:span 1}.bx-grid__height--sm--2{grid-row:span 2}.bx-grid__height--sm--3{grid-row:span 3}.bx-grid__height--sm--4{grid-row:span 4}.bx-grid__height--sm--5{grid-row:span 5}.bx-grid__height--sm--6{grid-row:span 6}.bx-grid__height--sm--7{grid-row:span 7}.bx-grid__height--sm--8{grid-row:span 8}.bx-grid__height--sm--9{grid-row:span 9}.bx-grid__height--sm--10{grid-row:span 10}.bx-grid__height--sm--11{grid-row:span 11}.bx-grid__height--sm--12{grid-row:span 12}.bx-grid__height--sm--13{grid-row:span 13}.bx-grid__height--sm--14{grid-row:span 14}.bx-grid__height--sm--15{grid-row:span 15}.bx-grid__height--sm--16{grid-row:span 16}.bx-grid__height--sm--17{grid-row:span 17}.bx-grid__height--sm--18{grid-row:span 18}.bx-grid__height--sm--19{grid-row:span 19}.bx-grid__height--sm--20{grid-row:span 20}.bx-grid__height--sm--21{grid-row:span 21}.bx-grid__height--sm--22{grid-row:span 22}.bx-grid__height--sm--23{grid-row:span 23}.bx-grid__height--sm--24{grid-row:span 24}.bx-grid__height--sm--25{grid-row:span 25}.bx-grid__height--sm--26{grid-row:span 26}.bx-grid__height--sm--27{grid-row:span 27}.bx-grid__height--sm--28{grid-row:span 28}.bx-grid__height--sm--29{grid-row:span 29}[class*=bx-grid__col--sm--]{display:block}.bx-grid__col--sm--0,.bx-grid__col--sm--0--only{display:none}.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,1.66667rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100vw - 10vw) * .0833)}.bx-grid__col--sm--1,.bx-grid__col--sm--1.bx-grid>:not([class*=bx-grid__col]){grid-column:span 1}.bx-grid--fluid-rows>.bx-grid__height--sm--1{grid-row:span 1}.bx-grid__col--sm--2,.bx-grid__col--sm--2.bx-grid>:not([class*=bx-grid__col]){grid-column:span 2}.bx-grid--fluid-rows>.bx-grid__height--sm--2{grid-row:span 2}.bx-grid__col--sm--3,.bx-grid__col--sm--3.bx-grid>:not([class*=bx-grid__col]){grid-column:span 3}.bx-grid--fluid-rows>.bx-grid__height--sm--3{grid-row:span 3}.bx-grid__col--sm--4,.bx-grid__col--sm--4.bx-grid>:not([class*=bx-grid__col]){grid-column:span 4}.bx-grid--fluid-rows>.bx-grid__height--sm--4{grid-row:span 4}.bx-grid__col--sm--5,.bx-grid__col--sm--5.bx-grid>:not([class*=bx-grid__col]){grid-column:span 5}.bx-grid--fluid-rows>.bx-grid__height--sm--5{grid-row:span 5}.bx-grid__col--sm--6,.bx-grid__col--sm--6.bx-grid>:not([class*=bx-grid__col]){grid-column:span 6}.bx-grid--fluid-rows>.bx-grid__height--sm--6{grid-row:span 6}.bx-grid__col--sm--7,.bx-grid__col--sm--7.bx-grid>:not([class*=bx-grid__col]){grid-column:span 7}.bx-grid--fluid-rows>.bx-grid__height--sm--7{grid-row:span 7}.bx-grid__col--sm--8,.bx-grid__col--sm--8.bx-grid>:not([class*=bx-grid__col]){grid-column:span 8}.bx-grid--fluid-rows>.bx-grid__height--sm--8{grid-row:span 8}.bx-grid__col--sm--9,.bx-grid__col--sm--9.bx-grid>:not([class*=bx-grid__col]){grid-column:span 9}.bx-grid--fluid-rows>.bx-grid__height--sm--9{grid-row:span 9}.bx-grid__col--sm--10,.bx-grid__col--sm--10.bx-grid>:not([class*=bx-grid__col]){grid-column:span 10}.bx-grid--fluid-rows>.bx-grid__height--sm--10{grid-row:span 10}.bx-grid__col--sm--11,.bx-grid__col--sm--11.bx-grid>:not([class*=bx-grid__col]){grid-column:span 11}.bx-grid--fluid-rows>.bx-grid__height--sm--11{grid-row:span 11}.bx-grid__col--sm--12,.bx-grid__col--sm--12.bx-grid>:not([class*=bx-grid__col]){grid-column:span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--12{grid-row:span 12}.bx-container{box-sizing:border-box;max-width:100rem;overflow-x:hidden;width:100vw;margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}@media screen and (min-width:100rem){.bx-grid__col--sm--0--only,[class*=bx-grid__col--xxl--]{display:block}.bx-grid__col--xxl--0,.bx-grid__col--xxl--0--only{display:none}.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid{grid-template-columns:repeat(auto-fill,calc((100rem - 10vw) * .0833))}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100rem - 10vw) * .0833)}.bx-container{margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}}
\ No newline at end of file
+html{font-size:16px}body{margin:0}.bx-container{box-sizing:border-box;max-width:100rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.bx-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,calc((100vw - 10vw) * .0833));grid-template-columns:repeat(auto-fill,calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833))}.bx-grid>*{box-sizing:border-box;grid-column:span 12}.bx-grid>* :last-child,.bx-grid>* :last-child>:last-child,.bx-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bx-padding]{box-sizing:border-box}@supports (display:grid){.bx-grid>*{height:100%}}:root{--scrollbar-width:0px;--bx-height-1:0.5rem;--bx-height-2:1rem;--bx-height-3:1.5rem;--bx-height-4:2rem;--bx-height-5:2.5rem;--bx-height-6:3rem;--bx-height-7:3.5rem;--bx-height-8:4rem;--bx-height-9:4.5rem;--bx-height-10:5rem;--bx-height-11:5.5rem;--bx-height-12:6rem;--bx-height-13:6.5rem;--bx-height-14:7rem;--bx-height-15:7.5rem;--bx-height-16:8rem;--bx-height-17:8.5rem;--bx-height-18:9rem;--bx-height-19:9.5rem;--bx-height-20:10rem;--bx-height-21:10.5rem;--bx-height-22:11rem;--bx-height-23:11.5rem;--bx-height-24:12rem;--bx-height-25:12.5rem;--bx-height-26:13rem;--bx-height-27:13.5rem;--bx-height-28:14rem;--bx-height-29:14.5rem}.bx-grid__height--sm--0{height:0;min-height:0}.bx-grid__height--sm--1{grid-row:span 1}.bx-grid__height--sm--2{grid-row:span 2}.bx-grid__height--sm--3{grid-row:span 3}.bx-grid__height--sm--4{grid-row:span 4}.bx-grid__height--sm--5{grid-row:span 5}.bx-grid__height--sm--6{grid-row:span 6}.bx-grid__height--sm--7{grid-row:span 7}.bx-grid__height--sm--8{grid-row:span 8}.bx-grid__height--sm--9{grid-row:span 9}.bx-grid__height--sm--10{grid-row:span 10}.bx-grid__height--sm--11{grid-row:span 11}.bx-grid__height--sm--12{grid-row:span 12}.bx-grid__height--sm--13{grid-row:span 13}.bx-grid__height--sm--14{grid-row:span 14}.bx-grid__height--sm--15{grid-row:span 15}.bx-grid__height--sm--16{grid-row:span 16}.bx-grid__height--sm--17{grid-row:span 17}.bx-grid__height--sm--18{grid-row:span 18}.bx-grid__height--sm--19{grid-row:span 19}.bx-grid__height--sm--20{grid-row:span 20}.bx-grid__height--sm--21{grid-row:span 21}.bx-grid__height--sm--22{grid-row:span 22}.bx-grid__height--sm--23{grid-row:span 23}.bx-grid__height--sm--24{grid-row:span 24}.bx-grid__height--sm--25{grid-row:span 25}.bx-grid__height--sm--26{grid-row:span 26}.bx-grid__height--sm--27{grid-row:span 27}.bx-grid__height--sm--28{grid-row:span 28}.bx-grid__height--sm--29{grid-row:span 29}[class*=bx-grid__col--sm--]{display:block}.bx-grid__col--sm--0,.bx-grid__col--sm--0--only{display:none}.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,1.66667rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100vw - 10vw) * .0833);grid-auto-rows:calc(((100vw - var(--scrollbar-width)) - 10vw) * .0833)}.bx-grid__col--sm--1,.bx-grid__col--sm--1.bx-grid>:not([class*=bx-grid__col]){grid-column:span 1}.bx-grid--fluid-rows>.bx-grid__height--sm--1{grid-row:span 1}.bx-grid__col--sm--2,.bx-grid__col--sm--2.bx-grid>:not([class*=bx-grid__col]){grid-column:span 2}.bx-grid--fluid-rows>.bx-grid__height--sm--2{grid-row:span 2}.bx-grid__col--sm--3,.bx-grid__col--sm--3.bx-grid>:not([class*=bx-grid__col]){grid-column:span 3}.bx-grid--fluid-rows>.bx-grid__height--sm--3{grid-row:span 3}.bx-grid__col--sm--4,.bx-grid__col--sm--4.bx-grid>:not([class*=bx-grid__col]){grid-column:span 4}.bx-grid--fluid-rows>.bx-grid__height--sm--4{grid-row:span 4}.bx-grid__col--sm--5,.bx-grid__col--sm--5.bx-grid>:not([class*=bx-grid__col]){grid-column:span 5}.bx-grid--fluid-rows>.bx-grid__height--sm--5{grid-row:span 5}.bx-grid__col--sm--6,.bx-grid__col--sm--6.bx-grid>:not([class*=bx-grid__col]){grid-column:span 6}.bx-grid--fluid-rows>.bx-grid__height--sm--6{grid-row:span 6}.bx-grid__col--sm--7,.bx-grid__col--sm--7.bx-grid>:not([class*=bx-grid__col]){grid-column:span 7}.bx-grid--fluid-rows>.bx-grid__height--sm--7{grid-row:span 7}.bx-grid__col--sm--8,.bx-grid__col--sm--8.bx-grid>:not([class*=bx-grid__col]){grid-column:span 8}.bx-grid--fluid-rows>.bx-grid__height--sm--8{grid-row:span 8}.bx-grid__col--sm--9,.bx-grid__col--sm--9.bx-grid>:not([class*=bx-grid__col]){grid-column:span 9}.bx-grid--fluid-rows>.bx-grid__height--sm--9{grid-row:span 9}.bx-grid__col--sm--10,.bx-grid__col--sm--10.bx-grid>:not([class*=bx-grid__col]){grid-column:span 10}.bx-grid--fluid-rows>.bx-grid__height--sm--10{grid-row:span 10}.bx-grid__col--sm--11,.bx-grid__col--sm--11.bx-grid>:not([class*=bx-grid__col]){grid-column:span 11}.bx-grid--fluid-rows>.bx-grid__height--sm--11{grid-row:span 11}.bx-grid__col--sm--12,.bx-grid__col--sm--12.bx-grid>:not([class*=bx-grid__col]){grid-column:span 12}.bx-grid--fluid-rows>.bx-grid__height--sm--12{grid-row:span 12}.bx-container{margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}@media screen and (min-width:100rem){.bx-grid__col--sm--0--only,[class*=bx-grid__col--xxl--]{display:block}.bx-grid__col--xxl--0,.bx-grid__col--xxl--0--only{display:none}.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid{grid-template-columns:repeat(auto-fill,calc((100rem - 10vw) * .0833));grid-template-columns:repeat(auto-fill,calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833))}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100rem - 10vw) * .0833);grid-auto-rows:calc(((100rem - var(--scrollbar-width)) - 10vw) * .0833)}.bx-container{margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}}
\ No newline at end of file
diff --git a/examples/carbon/css-gridish/js/bx-grid.js b/examples/carbon/css-gridish/js/bx-grid.js
new file mode 100644
index 0000000..6bd20d4
--- /dev/null
+++ b/examples/carbon/css-gridish/js/bx-grid.js
@@ -0,0 +1,20 @@
+(function () {
+  var updateScrollbarWidth = function () {
+    const scrollbarWidth =
+      window.innerWidth - document.documentElement.clientWidth + "px";
+
+    document.documentElement.style.setProperty(
+      "--scrollbar-width",
+      scrollbarWidth
+    );
+  };
+
+  var scrollbarObserver = new MutationObserver(updateScrollbarWidth);
+  scrollbarObserver.observe(document.body, {
+    attributes: true,
+    childList: true,
+    characterData: true
+  });
+
+  updateScrollbarWidth();
+})();
\ No newline at end of file
diff --git a/examples/carbon/css-gridish/scss/_core.scss b/examples/carbon/css-gridish/scss/_core.scss
index 0df8cfd..7ea5a1d 100755
--- a/examples/carbon/css-gridish/scss/_core.scss
+++ b/examples/carbon/css-gridish/scss/_core.scss
@@ -17,6 +17,7 @@ body {
   margin-right: auto;
   max-width: #{map-get($last, breakpoint)}rem;
   overflow-x: hidden;
+  padding-right: var(--scrollbar-width);
   width: 100vw;
 }
 
@@ -77,21 +78,26 @@ body {
   }
 }
 
-@include grid-legacy-wrapper($includeFlexFallback) {
-  :root {
+:root {
+  --scrollbar-width: 0px;
+  @include grid-legacy-wrapper($includeFlexFallback) {
     @include grid-heights-fixed($rows);
   }
 }
 
 @each $name, $breakpoint in $allBreakpoints {
   @include media-query($name) {
-    @if is-same-breakpoint($breakpoint, $last) == false {
+    @if is-same-breakpoint($breakpoint, $last) == false and $minimal == false {
       @include grid-legacy-heights($name);
     }
-    @include grid-legacy-zeros($breakpoint, $name);
+    @if $minimal == false {
+      @include grid-legacy-zeros($breakpoint, $name);
+    }
     @include grid-padding($breakpoint);
     @include grid($breakpoint, $name);
-    @include grid-legacy-columns($breakpoint, $name);
+    @if $minimal == false {
+      @include grid-legacy-columns($breakpoint, $name);
+    }
 
     // Wrap all bleed/break classes and css variables in a CSS Grid support query
     @include grid-legacy-wrapper($includeFlexFallback) {
diff --git a/examples/carbon/css-gridish/scss/_mixins.scss b/examples/carbon/css-gridish/scss/_mixins.scss
index cf7bf4b..0851a57 100755
--- a/examples/carbon/css-gridish/scss/_mixins.scss
+++ b/examples/carbon/css-gridish/scss/_mixins.scss
@@ -1,13 +1,15 @@
 // Set the width of a grid’s column
 @mixin grid($breakpoint, $breakpointName) {
   @if (map-get($breakpoint, columns) != null) {
-    $columnSize: get-fluid-size($breakpointName, 1);
+    $columnSize: get-fluid-size($breakpointName, 1, false);
+    $columnSizeScrollbar: get-fluid-size($breakpointName, 1);
 
     .#{$prefix}-grid {
       @if is-same-breakpoint($breakpoint, $first) {
         grid-auto-rows: minmax($rowHeight * 1rem, min-content);
       }
       grid-template-columns: repeat(auto-fill, $columnSize);
+      grid-template-columns: repeat(auto-fill, $columnSizeScrollbar);
 
       &.#{$prefix}-grid--fixed-columns {
         grid-template-columns: repeat(
@@ -20,6 +22,7 @@
 
       &.#{$prefix}-grid--fluid-rows {
         grid-auto-rows: $columnSize;
+        grid-auto-rows: $columnSizeScrollbar;
       }
 
       @if is-same-breakpoint($breakpoint, $last) == false {
@@ -55,7 +58,8 @@
           $columnMultiplier: $i *
             map-get($breakpoint, columns) /
             map-get($currentBreakpoint, columns);
-          $columnSize: get-fluid-size($name, $columnMultiplier);
+          $columnSize: get-fluid-size($name, $columnMultiplier, false);
+          $columnSizeScrollbar: get-fluid-size($name, $columnMultiplier);
 
           $isSecondToLast: is-same-breakpoint(
             $breakpoint,
@@ -63,6 +67,11 @@
           );
 
           $maxColumnSize: get-fluid-size(
+            nth(nth($allBreakpoints, length($allBreakpoints)), 1),
+            $columnMultiplier,
+            false
+          );
+          $maxColumnSizeScrollbar: get-fluid-size(
             nth(nth($allBreakpoints, length($allBreakpoints)), 1),
             $columnMultiplier
           );
@@ -72,8 +81,10 @@
               // If second-to-last media query, apply max-width instead of remaking classes in last media query
               @if $isSecondToLast {
                 max-width: $maxColumnSize;
+                max-width: $maxColumnSizeScrollbar;
               }
               width: $columnSize;
+              width: $columnSizeScrollbar;
             }
             grid-column: span #{$columnMultiplier};
 
@@ -89,10 +100,13 @@
             grid-row: span $i;
             @if $includeFlexFallback {
               height: $columnSize;
+              height: $columnSizeScrollbar;
               min-height: $columnSize;
+              min-height: $columnSizeScrollbar;
               // If second-to-last media query, apply max-height instead of remaking classes in last media query
               @if $isSecondToLast {
                 max-height: $maxColumnSize;
+                max-height: $maxColumnSizeScrollbar;
               }
             }
           }
diff --git a/examples/carbon/css-gridish/scss/_utilities.scss b/examples/carbon/css-gridish/scss/_utilities.scss
index 1d29635..31d2fd1 100644
--- a/examples/carbon/css-gridish/scss/_utilities.scss
+++ b/examples/carbon/css-gridish/scss/_utilities.scss
@@ -18,6 +18,7 @@
 /// Returns a calc() expression that represents a fluid width at a given breakpoint.
 /// @param {String} $breakpointName A valid breakpoint.
 /// @param {Number} $columnSpan The number of columns to span across.
+/// @param {Boolean} $supportsCSSVariable Does the output rule include CSS Variables?
 /// @return {Length} A calc() expression representing fluid width.
 /// @example scss
 /// button {
@@ -31,7 +32,11 @@
 ///     max-width: 25vw;
 ///   }
 /// }
-@function get-fluid-size($breakpointName, $columnSpan) {
+@function get-fluid-size(
+  $breakpointName,
+  $columnSpan,
+  $supportsCSSVariable: true
+) {
   $breakpoint: map-get($breakpointsAndArtboards, $breakpointName);
 
   @if ($breakpoint == null or type-of($breakpoint) != "map") {
@@ -54,16 +59,27 @@
   }
 
   $container: 100vw;
+  @if ($supportsCSSVariable) {
+    $container: "(100vw - var(--scrollbar-width))";
+  }
+
   // Last breakpoint is a max-width and should be a fixed number
   @if is-same-breakpoint($breakpoint, $last) {
     $container: map-get($breakpoint, breakpoint) * 1rem;
+    @if ($supportsCSSVariable) {
+      $container: "(#{$container} - var(--scrollbar-width))";
+    }
   }
 
   $multiplier: round-decimal($columnSpan / $columnTotal, 4, floor);
 
   // For IE, we can't have a 0 in the $fluidWidth calc().
   @if ($margin == 0) {
-    @return $container * $multiplier;
+    @if ($supportsCSSVariable) {
+      @return calc(#{$container}* #{$multiplier});
+    } @else {
+      @return $container * $multiplier;
+    }
   }
 
   @return calc((#{$container} - #{$margin * 2}) * #{$multiplier});
diff --git a/examples/carbon/css-gridish/scss/_variables.scss b/examples/carbon/css-gridish/scss/_variables.scss
index 19b5e36..1863d1e 100755
--- a/examples/carbon/css-gridish/scss/_variables.scss
+++ b/examples/carbon/css-gridish/scss/_variables.scss
@@ -9,6 +9,7 @@ $breakpoints: add-padding(map-get($grid-values, "breakpoints"));
 $first: nth(nth($breakpoints, 1), 2);
 $last: nth(nth($breakpoints, -1), 2);
 $includeFlexFallback: false !default;
+$minimal: false !default;
 $rowHeight: map-get($grid-values, "rowHeight");
 $rows: map-get($grid-values, "rows");
 $extraArtboards: map-get($grid-values, "extraArtboards");
diff --git a/examples/carbon/css-gridish/scss/bx-grid-minimal.scss b/examples/carbon/css-gridish/scss/bx-grid-minimal.scss
new file mode 100644
index 0000000..6826a5e
--- /dev/null
+++ b/examples/carbon/css-gridish/scss/bx-grid-minimal.scss
@@ -0,0 +1,3 @@
+$minimal: true;
+
+@import "core.scss";
diff --git a/examples/carbon/index.html b/examples/carbon/index.html
index 5a3e399..10556c7 100644
--- a/examples/carbon/index.html
+++ b/examples/carbon/index.html
@@ -61,6 +61,7 @@ <h2>Carbon Example</h2>
     </p>
   </div>
 </body>
+<script type="text/javascript" src="./css-gridish/js/carbon-grid.js"></script>
 <script>
   function makeNewElement() {
     var colors = ["#3d70b2", "#5596e6", "#41d6c3", "#8c9ba5", "#dfe3e6"];
diff --git a/examples/material/css-gridish/README.md b/examples/material/css-gridish/README.md
index 3337486..43cff94 100755
--- a/examples/material/css-gridish/README.md
+++ b/examples/material/css-gridish/README.md
@@ -4,12 +4,12 @@ An example of [CSS Gridish](../../../README.md) generating CSS Grid code, fallba
 
 This grid was bootstrapped using [CSS Gridish](https://github.com/ibm/css-gridish). It includes:
 - CSS Grid Layout code with a Flexbox fallback in CSS and SCSS
-- Sketch file with artboards
+- Sketch design file with artboards
 - Config file (`css-gridish.json`) to review webpages with the [CSS Gridish Chrome Extension](https://chrome.google.com/webstore/detail/css-gridish/ebhcneoilkamaddhlphlehojpcooobgc)
 
 ## Sketch Artboards and Chrome Extension
 
-The Sketch file can be found above in the list of files titled `material-grid.sketch`. It includes both grid (CTRL+G) and layout (CTRL+L) settings.
+The Sketch design file can be found above in the list of files titled `material-grid.sketch`. It includes both grid (CTRL+G) and layout (CTRL+L) settings.
 
 The Chrome extension uses the same shortcuts. To set the extension up:
 
@@ -17,21 +17,21 @@ The Chrome extension uses the same shortcuts. To set the extension up:
 2. Download the `css-gridish.json` file in this project
 3. Open the CSS Gridish menu in your Chrome toolbar and upload your `css-gridish.json` file
 
-## Legacy Support
+## Files
 
-If you have no need to support browsers like IE 11 and Edge <15, please use `css/material-grid.min.css`. This will omit the CSS Flexbox fallback from your code.
+There are three CSS files to choose from based on what browser support you want and whether you will use native CSS Grid rules or our provided classes:
 
-If you are supporting browsers that lack [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), you can use `css/material-grid-legacy.min.css` and the legacy classes below. With the legacy file, the browsers that do not support the final CSS Grid Legacy spec will fallback to a flexbox alternative. The flexbox alternative supports embedded subgrids that still reflect the overall grid system’s column structure.
+| Filename | When to Use |
+| ---------- | ----------------- |
+| `css/material-grid-legacy.min.css` | To also support browsers that do not have [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility) (IE 11 and Edge <15) with a reliable Flexbox fallback |
+| `css/material-grid.min.css` | To only support browsers with [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility) |
+| `css/material-grid-minimal.min.css` | To only support browsers with [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), but not use any generated column or height classes |
 
-### Transitioning from Legacy
-
-Once your experience can drop support for IE 11 and Edge <15, you can simply remove all legacy classes and switch over to `css/material-grid.min.css`.
+There is also an optional JavaScript file included at `js/material-grid.js`. This will adjust the grid to not go behind browser scrollbars since different browsers handle the `vw` unit differently. It applies to any browser that supports [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility) and [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#Browser_compatibility).
 
 ## Breakpoints
 
-There are currently 4 breakpoints where the design specs change for our
-grid. The great thing about CSS Grid Layout is that you can rearrange your
-layout at any custom breakpoint between those:
+A breakpoint is where the number of columns or another value changes using a media query. There are currently 4 breakpoints where the design specs change for our grid. The great thing about CSS Grid Layout is that you can rearrange your layout at any custom breakpoint between those:
 
 | Breakpoint | Number of Columns | Width    | Value  |
 | ---------- | ----------------- | ------- | ------ |
@@ -62,30 +62,37 @@ The example above will create all legacy classes for your custom breakpoints lik
 
 If you are new to CSS Grid, please try [learning the basics](https://www.google.com/search?q=css+grid+tutorials&oq=css+grid+tutorials) before using this. For the most part, you will only have to use `grid-column` and `grid-row` with the following classes:
 
-| Class Name                                | Purpose                                                                                    |
-| ----------------------------------------- | ------------------------------------------------------------------------------------------ |
-| `.material-container`                          | Container element of whole page for proper margin and max-width (can be used on body tag ) |
-| `.material-container--[left, right]`            | Align the container element to the left or right side                                      |
-| `.material-container__bleed--[xsmall, small, medium]`                         | Extend the background color of a container child into the container margin on both sides starting at a specific breakpoint (CSS Grid browsers only)        |
-| `.material-container__bleed--[xsmall, small, medium]--[left, right]`           | Extend the background color of a grid into the container margin on one side at a specific breakpoint (CSS Grid browsers only)           |
-| `.material-container__break--[xsmall, small, medium]`                         | Child of container element should ignore grid’s margin at a specific breakpoint (CSS Grid browsers only)       |
-| `.material-container__break--[xsmall, small, medium]--[left, right]`           | Child of container element should ignore grid’s margin on one side at a specific breakpoint (CSS Grid browsers only)                             |
-| `.material-grid`                               | Use anytime you want to apply CSS Grid Layout, including as embedded subgrids              |
-| `.material-grid--fixed-columns`                         | Switch grid’s column widths to fixed instead of fluid                                       |
-| `.material-grid--fluid-rows`                         | Switch grid’s row height to match the width of a column                                        |
-| `.material-padding`                            | Add one unit of padding to element on all sides                                            |
-| `.material-padding--[bottom, left, right, top]` | Add one unit of padding to element on one side                                             |
-| `.material-padding--[horizontal, vertical]`     | Add one unit of padding to element on two sides                                            |
-| `.material-grid__col--xsmall--[1-4]`                          | Set the width out of 4 columns for an item in the grid starting at the xsmall breakpoint |
-| `.material-grid__col--small--[1-8]`                          | Set the width out of 8 columns for an item in the grid starting at the small breakpoint |
-| `.material-grid__col--medium--[1-12]`                          | Set the width out of 12 columns for an item in the grid starting at the medium breakpoint |
-| `.material-grid__col--[xsmall, small, medium]--0`                          | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified |
-| `.material-grid__col--[xsmall, small, medium]--0--only`                          | Do not display item only at specific breakpoint |
-| `.material-grid__height--[xsmall, small, medium]--[1-30]`                          | Set the min-height based on an interval of 8px for an item starting at the breakpoint specified |
-| `.material-grid__height--[xsmall, small, medium]--0`                          | Reset the min-height for an item starting at the specified breakpoint |
+| Class Name | Purpose | Child? |
+| ---------- | ------- | ------ |
+| `.material-container` | Container element of whole page for proper margin and max-width (can be used on body tag). You need to use `.material-grid` on this same element. | No |
+| `.material-container--[left, right]` | Align the container element to the left or right side | |
+| `.material-container__bleed--[xsmall, small, medium]` | Extend the background color of a container child into the container margin on both sides starting at a specific breakpoint (CSS Grid browsers only) | Child of `.material-container` |
+| `.material-container__bleed--[xsmall, small, medium]--[left, right]` | Extend the background color of a grid into the container margin on one side at a specific breakpoint (CSS Grid browsers only) | Child of `.material-container` |
+| `.material-container__break--[xsmall, small, medium]` |Ignore container’s margin at a specific breakpoint (CSS Grid browsers only) | Child of `.material-container` |
+| `.material-container__break--[xsmall, small, medium]--[left, right]` | Ignore container’s margin on one side at a specific breakpoint (CSS Grid browsers only) | Child of `.material-container` |
+| `.material-grid` | Use anytime you want to apply CSS Grid Layout, including as embedded subgrids | Peer of `.material-container` or direct child of another `.material-grid` |
+| `.material-grid--fixed-columns` | Switch grid’s column widths to fixed instead of fluid | |
+| `.material-grid--fluid-rows` | Switch grid’s row height to match the width of a column | |
+| `.material-padding` | Add one unit of padding to element on all sides | Child of `.material-grid` |
+| `.material-padding--[bottom, left, right, top]` | Add one unit of padding to element on one side | Child of `.material-grid` |
+| `.material-padding--[horizontal, vertical]` | Add one unit of padding to element on two sides | Child of `.material-grid` |
 
 By default, the grid code uses fluid columns and fixed rows. You can switch both aspects with `.material-grid--fixed-columns` and `.material-grid--fluid-rows`. When switching to fluid rows, the rows will scale across breakpoints just like `col` classes and only supports quantities up to the amount of columns in that breakpoint.
 
+## Optional Classes
+
+The following classes are included in `css/material-grid.min.css` and `css/material-grid-legacy.min.css`. For the minimal file, you would instead use native CSS Grid rules as needed.
+
+| Class Name | Purpose | Child? |
+| ---------- | ------- | ------ |
+| `.material-grid__col--xsmall--[1-4]` | Set the width out of 4 columns for an item in the grid starting at the xsmall breakpoint | Child of `.material-grid` |
+| `.material-grid__col--small--[1-8]` | Set the width out of 8 columns for an item in the grid starting at the small breakpoint | Child of `.material-grid` |
+| `.material-grid__col--medium--[1-12]` | Set the width out of 12 columns for an item in the grid starting at the medium breakpoint | Child of `.material-grid` |
+| `.material-grid__col--[xsmall, small, medium]--0` | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified | Child of `.material-grid` |
+| `.material-grid__col--[xsmall, small, medium]--0--only` | Do not display item only at specific breakpoint | Child of `.material-grid` |
+| `.material-grid__height--[xsmall, small, medium]--[1-30]` | Set the min-height based on an interval of 8px for an item starting at the breakpoint specified | Child of `.material-grid` |
+| `.material-grid__height--[xsmall, small, medium]--0` | Reset the min-height for an item starting at the specified breakpoint | Child of `.material-grid` |
+
 If you follow the instructions above for custom breakpoints, all of the `col` and `height` classes will generate with a version for each custom breakpoint too. For example, adding the custom breakpoint of `whateversize` will create `.material-grid__col--whateversize--1`. Since that custom breakpoint is right after the previous breakpoint, it will have the same amount of columns and min-height.
 
 ## Variables
@@ -188,22 +195,22 @@ button {
 
 A lot of times, you will want an item to break out of the gutters for background color, to extend media, or for another reason. Until the CSS Grid spec has a way to ignore that gutter, we use the padding classes (`.material-padding`) to opt-in to respecting the gutter. The padding classes are always half the size of a gutter for alignment.
 
-### Why is the fallback using flexbox instead of the `-ms` prefix use of CSS Grid?
+### Why is the legacy version using Flexbox instead of the `-ms` prefix use of CSS Grid?
 
 The biggest reason is due to the lack of auto-placement when using that prefix. See more details about difference in the `-ms` prefix in [this blog post.](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/)
 
+### Why are there no grouping row classes needed?
+
+Thanks to flexbox’s wrapping functionality, nodes that specify rows are not necessary. Only create a node for a row if it has semantic or accessibility significance. You can keep embedding `.material-grid` as necessary to accomplish this.
+
+### What happens if I specify the column class for one breakpoint, but not the column class for the next breakpoint?
+
+To maintain a mobile-first opinion, column widths will scale to the next breakpoint if not specified. This means that a `.material-grid__col--xsmall--1` be the size of `.material-grid__col--small--2` if no `small` class was declared.
+
 ### Why are columns using vw units and sometimes the calc function?
 
 Until Edge and Safari support
 [`display: subgrid`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility),
 it is difficult for you to write semantic HTML with CSS Grid Layout. We are
 able to take advantage of vw units and the calc function so you can embed 
-`.material-grid` elements inside of each other and still respect the overall grid design.
-
-### Why are there no grouping row classes needed?
-
-Thanks to flexbox’s wrapping functionality, nodes that specify rows are not necessary. Only create a node for a row if it has semantic or accessibility significance. You can keep embedding `.material-grid` as necessary to accomplish this.
-
-### What happens in the legacy implementation if I specify the column width for one breakpoint, but not the next larger breakpoint?
-
-To maintain a mobile-first opinion, column widths will scale to the next breakpoint if not specified. This means that a `.material-grid__col--xsmall--1` be the size of `.material-grid__col--small--2` if no `small` class was declared.
\ No newline at end of file
+`.material-grid` elements inside of each other and still respect the overall grid design.
\ No newline at end of file
diff --git a/examples/material/css-gridish/css/material-grid-legacy.css b/examples/material/css-gridish/css/material-grid-legacy.css
index 65b0862..f4f8146 100755
--- a/examples/material/css-gridish/css/material-grid-legacy.css
+++ b/examples/material/css-gridish/css/material-grid-legacy.css
@@ -10,6 +10,7 @@ body {
   margin-right: auto;
   max-width: 120rem;
   overflow-x: hidden;
+  padding-right: var(--scrollbar-width);
   width: 100vw; }
 
 .material-container--left {
@@ -48,37 +49,39 @@ body {
   .material-grid > * {
     height: 100%; } }
 
-@supports (display: grid) {
-  :root {
-    --material-height-1: 0.5rem;
-    --material-height-2: 1rem;
-    --material-height-3: 1.5rem;
-    --material-height-4: 2rem;
-    --material-height-5: 2.5rem;
-    --material-height-6: 3rem;
-    --material-height-7: 3.5rem;
-    --material-height-8: 4rem;
-    --material-height-9: 4.5rem;
-    --material-height-10: 5rem;
-    --material-height-11: 5.5rem;
-    --material-height-12: 6rem;
-    --material-height-13: 6.5rem;
-    --material-height-14: 7rem;
-    --material-height-15: 7.5rem;
-    --material-height-16: 8rem;
-    --material-height-17: 8.5rem;
-    --material-height-18: 9rem;
-    --material-height-19: 9.5rem;
-    --material-height-20: 10rem;
-    --material-height-21: 10.5rem;
-    --material-height-22: 11rem;
-    --material-height-23: 11.5rem;
-    --material-height-24: 12rem;
-    --material-height-25: 12.5rem;
-    --material-height-26: 13rem;
-    --material-height-27: 13.5rem;
-    --material-height-28: 14rem;
-    --material-height-29: 14.5rem; } }
+:root {
+  --scrollbar-width: 0px; }
+  @supports (display: grid) {
+    :root {
+      --material-height-1: 0.5rem;
+      --material-height-2: 1rem;
+      --material-height-3: 1.5rem;
+      --material-height-4: 2rem;
+      --material-height-5: 2.5rem;
+      --material-height-6: 3rem;
+      --material-height-7: 3.5rem;
+      --material-height-8: 4rem;
+      --material-height-9: 4.5rem;
+      --material-height-10: 5rem;
+      --material-height-11: 5.5rem;
+      --material-height-12: 6rem;
+      --material-height-13: 6.5rem;
+      --material-height-14: 7rem;
+      --material-height-15: 7.5rem;
+      --material-height-16: 8rem;
+      --material-height-17: 8.5rem;
+      --material-height-18: 9rem;
+      --material-height-19: 9.5rem;
+      --material-height-20: 10rem;
+      --material-height-21: 10.5rem;
+      --material-height-22: 11rem;
+      --material-height-23: 11.5rem;
+      --material-height-24: 12rem;
+      --material-height-25: 12.5rem;
+      --material-height-26: 13rem;
+      --material-height-27: 13.5rem;
+      --material-height-28: 14rem;
+      --material-height-29: 14.5rem; } }
 
 .material-grid__height--xsmall--0 {
   height: 0;
@@ -261,16 +264,19 @@ body {
 
 .material-grid {
   grid-auto-rows: minmax(0.5rem, min-content);
-  grid-template-columns: repeat(auto-fill, 25vw); }
+  grid-template-columns: repeat(auto-fill, 25vw);
+  grid-template-columns: repeat(auto-fill, calc((100vw - var(--scrollbar-width))* 0.25)); }
   .material-grid.material-grid--fixed-columns {
     grid-template-columns: repeat(auto-fill, 5.625rem); }
   .material-grid.material-grid--fluid-rows {
-    grid-auto-rows: 25vw; }
+    grid-auto-rows: 25vw;
+    grid-auto-rows: calc((100vw - var(--scrollbar-width))* 0.25); }
   .material-grid > * {
     grid-column: span 4; }
 
 .material-grid__col--xsmall--1 {
   width: 25vw;
+  width: calc((100vw - var(--scrollbar-width))* 0.25);
   grid-column: span 1; }
   .material-grid__col--xsmall--1.material-grid > *:not([class*="material-grid__col"]) {
     grid-column: span 1; }
@@ -279,10 +285,13 @@ body {
 > .material-grid__height--xsmall--1 {
   grid-row: span 1;
   height: 25vw;
-  min-height: 25vw; }
+  height: calc((100vw - var(--scrollbar-width))* 0.25);
+  min-height: 25vw;
+  min-height: calc((100vw - var(--scrollbar-width))* 0.25); }
 
 .material-grid__col--xsmall--2 {
   width: 50vw;
+  width: calc((100vw - var(--scrollbar-width))* 0.5);
   grid-column: span 2; }
   .material-grid__col--xsmall--2.material-grid > *:not([class*="material-grid__col"]) {
     grid-column: span 2; }
@@ -291,10 +300,13 @@ body {
 > .material-grid__height--xsmall--2 {
   grid-row: span 2;
   height: 50vw;
-  min-height: 50vw; }
+  height: calc((100vw - var(--scrollbar-width))* 0.5);
+  min-height: 50vw;
+  min-height: calc((100vw - var(--scrollbar-width))* 0.5); }
 
 .material-grid__col--xsmall--3 {
   width: 75vw;
+  width: calc((100vw - var(--scrollbar-width))* 0.75);
   grid-column: span 3; }
   .material-grid__col--xsmall--3.material-grid > *:not([class*="material-grid__col"]) {
     grid-column: span 3; }
@@ -303,10 +315,13 @@ body {
 > .material-grid__height--xsmall--3 {
   grid-row: span 3;
   height: 75vw;
-  min-height: 75vw; }
+  height: calc((100vw - var(--scrollbar-width))* 0.75);
+  min-height: 75vw;
+  min-height: calc((100vw - var(--scrollbar-width))* 0.75); }
 
 .material-grid__col--xsmall--4 {
   width: 100vw;
+  width: calc((100vw - var(--scrollbar-width))* 1);
   grid-column: span 4; }
   .material-grid__col--xsmall--4.material-grid > *:not([class*="material-grid__col"]) {
     grid-column: span 4; }
@@ -315,7 +330,9 @@ body {
 > .material-grid__height--xsmall--4 {
   grid-row: span 4;
   height: 100vw;
-  min-height: 100vw; }
+  height: calc((100vw - var(--scrollbar-width))* 1);
+  min-height: 100vw;
+  min-height: calc((100vw - var(--scrollbar-width))* 1); }
 
 @media screen and (min-width: 37.5rem) {
   .material-grid__height--small--0 {
@@ -461,15 +478,18 @@ body {
     padding-bottom: 0.5rem;
     padding-top: 0.5rem; }
   .material-grid {
-    grid-template-columns: repeat(auto-fill, 12.5vw); }
+    grid-template-columns: repeat(auto-fill, 12.5vw);
+    grid-template-columns: repeat(auto-fill, calc((100vw - var(--scrollbar-width))* 0.125)); }
     .material-grid.material-grid--fixed-columns {
       grid-template-columns: repeat(auto-fill, 4.6875rem); }
     .material-grid.material-grid--fluid-rows {
-      grid-auto-rows: 12.5vw; }
+      grid-auto-rows: 12.5vw;
+      grid-auto-rows: calc((100vw - var(--scrollbar-width))* 0.125); }
     .material-grid > * {
       grid-column: span 8; }
   .material-grid__col--xsmall--1 {
     width: 25vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.25);
     grid-column: span 2; }
     .material-grid__col--xsmall--1.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 1; }
@@ -477,9 +497,12 @@ body {
 > .material-grid__height--xsmall--1 {
     grid-row: span 1;
     height: 25vw;
-    min-height: 25vw; }
+    height: calc((100vw - var(--scrollbar-width))* 0.25);
+    min-height: 25vw;
+    min-height: calc((100vw - var(--scrollbar-width))* 0.25); }
   .material-grid__col--xsmall--2 {
     width: 50vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.5);
     grid-column: span 4; }
     .material-grid__col--xsmall--2.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 2; }
@@ -487,9 +510,12 @@ body {
 > .material-grid__height--xsmall--2 {
     grid-row: span 2;
     height: 50vw;
-    min-height: 50vw; }
+    height: calc((100vw - var(--scrollbar-width))* 0.5);
+    min-height: 50vw;
+    min-height: calc((100vw - var(--scrollbar-width))* 0.5); }
   .material-grid__col--xsmall--3 {
     width: 75vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.75);
     grid-column: span 6; }
     .material-grid__col--xsmall--3.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 3; }
@@ -497,9 +523,12 @@ body {
 > .material-grid__height--xsmall--3 {
     grid-row: span 3;
     height: 75vw;
-    min-height: 75vw; }
+    height: calc((100vw - var(--scrollbar-width))* 0.75);
+    min-height: 75vw;
+    min-height: calc((100vw - var(--scrollbar-width))* 0.75); }
   .material-grid__col--xsmall--4 {
     width: 100vw;
+    width: calc((100vw - var(--scrollbar-width))* 1);
     grid-column: span 8; }
     .material-grid__col--xsmall--4.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 4; }
@@ -507,9 +536,12 @@ body {
 > .material-grid__height--xsmall--4 {
     grid-row: span 4;
     height: 100vw;
-    min-height: 100vw; }
+    height: calc((100vw - var(--scrollbar-width))* 1);
+    min-height: 100vw;
+    min-height: calc((100vw - var(--scrollbar-width))* 1); }
   .material-grid__col--small--1 {
     width: 12.5vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.125);
     grid-column: span 1; }
     .material-grid__col--small--1.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 1; }
@@ -517,9 +549,12 @@ body {
 > .material-grid__height--small--1 {
     grid-row: span 1;
     height: 12.5vw;
-    min-height: 12.5vw; }
+    height: calc((100vw - var(--scrollbar-width))* 0.125);
+    min-height: 12.5vw;
+    min-height: calc((100vw - var(--scrollbar-width))* 0.125); }
   .material-grid__col--small--2 {
     width: 25vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.25);
     grid-column: span 2; }
     .material-grid__col--small--2.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 2; }
@@ -527,9 +562,12 @@ body {
 > .material-grid__height--small--2 {
     grid-row: span 2;
     height: 25vw;
-    min-height: 25vw; }
+    height: calc((100vw - var(--scrollbar-width))* 0.25);
+    min-height: 25vw;
+    min-height: calc((100vw - var(--scrollbar-width))* 0.25); }
   .material-grid__col--small--3 {
     width: 37.5vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.375);
     grid-column: span 3; }
     .material-grid__col--small--3.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 3; }
@@ -537,9 +575,12 @@ body {
 > .material-grid__height--small--3 {
     grid-row: span 3;
     height: 37.5vw;
-    min-height: 37.5vw; }
+    height: calc((100vw - var(--scrollbar-width))* 0.375);
+    min-height: 37.5vw;
+    min-height: calc((100vw - var(--scrollbar-width))* 0.375); }
   .material-grid__col--small--4 {
     width: 50vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.5);
     grid-column: span 4; }
     .material-grid__col--small--4.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 4; }
@@ -547,9 +588,12 @@ body {
 > .material-grid__height--small--4 {
     grid-row: span 4;
     height: 50vw;
-    min-height: 50vw; }
+    height: calc((100vw - var(--scrollbar-width))* 0.5);
+    min-height: 50vw;
+    min-height: calc((100vw - var(--scrollbar-width))* 0.5); }
   .material-grid__col--small--5 {
     width: 62.5vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.625);
     grid-column: span 5; }
     .material-grid__col--small--5.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 5; }
@@ -557,9 +601,12 @@ body {
 > .material-grid__height--small--5 {
     grid-row: span 5;
     height: 62.5vw;
-    min-height: 62.5vw; }
+    height: calc((100vw - var(--scrollbar-width))* 0.625);
+    min-height: 62.5vw;
+    min-height: calc((100vw - var(--scrollbar-width))* 0.625); }
   .material-grid__col--small--6 {
     width: 75vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.75);
     grid-column: span 6; }
     .material-grid__col--small--6.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 6; }
@@ -567,9 +614,12 @@ body {
 > .material-grid__height--small--6 {
     grid-row: span 6;
     height: 75vw;
-    min-height: 75vw; }
+    height: calc((100vw - var(--scrollbar-width))* 0.75);
+    min-height: 75vw;
+    min-height: calc((100vw - var(--scrollbar-width))* 0.75); }
   .material-grid__col--small--7 {
     width: 87.5vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.875);
     grid-column: span 7; }
     .material-grid__col--small--7.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 7; }
@@ -577,9 +627,12 @@ body {
 > .material-grid__height--small--7 {
     grid-row: span 7;
     height: 87.5vw;
-    min-height: 87.5vw; }
+    height: calc((100vw - var(--scrollbar-width))* 0.875);
+    min-height: 87.5vw;
+    min-height: calc((100vw - var(--scrollbar-width))* 0.875); }
   .material-grid__col--small--8 {
     width: 100vw;
+    width: calc((100vw - var(--scrollbar-width))* 1);
     grid-column: span 8; }
     .material-grid__col--small--8.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 8; }
@@ -587,7 +640,9 @@ body {
 > .material-grid__height--small--8 {
     grid-row: span 8;
     height: 100vw;
-    min-height: 100vw; } }
+    height: calc((100vw - var(--scrollbar-width))* 1);
+    min-height: 100vw;
+    min-height: calc((100vw - var(--scrollbar-width))* 1); } }
 
 @media screen and (min-width: 64rem) {
   .material-grid__height--medium--0 {
@@ -735,16 +790,20 @@ body {
     padding-bottom: 1rem;
     padding-top: 1rem; }
   .material-grid {
-    grid-template-columns: repeat(auto-fill, 8.33vw); }
+    grid-template-columns: repeat(auto-fill, 8.33vw);
+    grid-template-columns: repeat(auto-fill, calc((100vw - var(--scrollbar-width))* 0.0833)); }
     .material-grid.material-grid--fixed-columns {
       grid-template-columns: repeat(auto-fill, 5.33333rem); }
     .material-grid.material-grid--fluid-rows {
-      grid-auto-rows: 8.33vw; }
+      grid-auto-rows: 8.33vw;
+      grid-auto-rows: calc((100vw - var(--scrollbar-width))* 0.0833); }
     .material-grid > * {
       grid-column: span 12; }
   .material-grid__col--xsmall--1 {
     max-width: 30rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.25);
     width: 25vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.25);
     grid-column: span 3; }
     .material-grid__col--xsmall--1.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 1; }
@@ -752,11 +811,16 @@ body {
 > .material-grid__height--xsmall--1 {
     grid-row: span 1;
     height: 25vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.25);
     min-height: 25vw;
-    max-height: 30rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.25);
+    max-height: 30rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.25); }
   .material-grid__col--xsmall--2 {
     max-width: 60rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.5);
     width: 50vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.5);
     grid-column: span 6; }
     .material-grid__col--xsmall--2.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 2; }
@@ -764,11 +828,16 @@ body {
 > .material-grid__height--xsmall--2 {
     grid-row: span 2;
     height: 50vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.5);
     min-height: 50vw;
-    max-height: 60rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.5);
+    max-height: 60rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.5); }
   .material-grid__col--xsmall--3 {
     max-width: 90rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.75);
     width: 75vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.75);
     grid-column: span 9; }
     .material-grid__col--xsmall--3.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 3; }
@@ -776,11 +845,16 @@ body {
 > .material-grid__height--xsmall--3 {
     grid-row: span 3;
     height: 75vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.75);
     min-height: 75vw;
-    max-height: 90rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.75);
+    max-height: 90rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.75); }
   .material-grid__col--xsmall--4 {
     max-width: 120rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 1);
     width: 100vw;
+    width: calc((100vw - var(--scrollbar-width))* 1);
     grid-column: span 12; }
     .material-grid__col--xsmall--4.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 4; }
@@ -788,11 +862,16 @@ body {
 > .material-grid__height--xsmall--4 {
     grid-row: span 4;
     height: 100vw;
+    height: calc((100vw - var(--scrollbar-width))* 1);
     min-height: 100vw;
-    max-height: 120rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 1);
+    max-height: 120rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 1); }
   .material-grid__col--small--1 {
     max-width: 15rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.125);
     width: 12.5vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.125);
     grid-column: span 1.5; }
     .material-grid__col--small--1.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 1; }
@@ -800,11 +879,16 @@ body {
 > .material-grid__height--small--1 {
     grid-row: span 1;
     height: 12.5vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.125);
     min-height: 12.5vw;
-    max-height: 15rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.125);
+    max-height: 15rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.125); }
   .material-grid__col--small--2 {
     max-width: 30rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.25);
     width: 25vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.25);
     grid-column: span 3; }
     .material-grid__col--small--2.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 2; }
@@ -812,11 +896,16 @@ body {
 > .material-grid__height--small--2 {
     grid-row: span 2;
     height: 25vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.25);
     min-height: 25vw;
-    max-height: 30rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.25);
+    max-height: 30rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.25); }
   .material-grid__col--small--3 {
     max-width: 45rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.375);
     width: 37.5vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.375);
     grid-column: span 4.5; }
     .material-grid__col--small--3.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 3; }
@@ -824,11 +913,16 @@ body {
 > .material-grid__height--small--3 {
     grid-row: span 3;
     height: 37.5vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.375);
     min-height: 37.5vw;
-    max-height: 45rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.375);
+    max-height: 45rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.375); }
   .material-grid__col--small--4 {
     max-width: 60rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.5);
     width: 50vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.5);
     grid-column: span 6; }
     .material-grid__col--small--4.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 4; }
@@ -836,11 +930,16 @@ body {
 > .material-grid__height--small--4 {
     grid-row: span 4;
     height: 50vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.5);
     min-height: 50vw;
-    max-height: 60rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.5);
+    max-height: 60rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.5); }
   .material-grid__col--small--5 {
     max-width: 75rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.625);
     width: 62.5vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.625);
     grid-column: span 7.5; }
     .material-grid__col--small--5.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 5; }
@@ -848,11 +947,16 @@ body {
 > .material-grid__height--small--5 {
     grid-row: span 5;
     height: 62.5vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.625);
     min-height: 62.5vw;
-    max-height: 75rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.625);
+    max-height: 75rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.625); }
   .material-grid__col--small--6 {
     max-width: 90rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.75);
     width: 75vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.75);
     grid-column: span 9; }
     .material-grid__col--small--6.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 6; }
@@ -860,11 +964,16 @@ body {
 > .material-grid__height--small--6 {
     grid-row: span 6;
     height: 75vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.75);
     min-height: 75vw;
-    max-height: 90rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.75);
+    max-height: 90rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.75); }
   .material-grid__col--small--7 {
     max-width: 105rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.875);
     width: 87.5vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.875);
     grid-column: span 10.5; }
     .material-grid__col--small--7.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 7; }
@@ -872,11 +981,16 @@ body {
 > .material-grid__height--small--7 {
     grid-row: span 7;
     height: 87.5vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.875);
     min-height: 87.5vw;
-    max-height: 105rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.875);
+    max-height: 105rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.875); }
   .material-grid__col--small--8 {
     max-width: 120rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 1);
     width: 100vw;
+    width: calc((100vw - var(--scrollbar-width))* 1);
     grid-column: span 12; }
     .material-grid__col--small--8.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 8; }
@@ -884,11 +998,16 @@ body {
 > .material-grid__height--small--8 {
     grid-row: span 8;
     height: 100vw;
+    height: calc((100vw - var(--scrollbar-width))* 1);
     min-height: 100vw;
-    max-height: 120rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 1);
+    max-height: 120rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 1); }
   .material-grid__col--medium--1 {
     max-width: 9.996rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.0833);
     width: 8.33vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.0833);
     grid-column: span 1; }
     .material-grid__col--medium--1.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 1; }
@@ -896,11 +1015,16 @@ body {
 > .material-grid__height--medium--1 {
     grid-row: span 1;
     height: 8.33vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.0833);
     min-height: 8.33vw;
-    max-height: 9.996rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.0833);
+    max-height: 9.996rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.0833); }
   .material-grid__col--medium--2 {
     max-width: 19.992rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.1666);
     width: 16.66vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.1666);
     grid-column: span 2; }
     .material-grid__col--medium--2.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 2; }
@@ -908,11 +1032,16 @@ body {
 > .material-grid__height--medium--2 {
     grid-row: span 2;
     height: 16.66vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.1666);
     min-height: 16.66vw;
-    max-height: 19.992rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.1666);
+    max-height: 19.992rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.1666); }
   .material-grid__col--medium--3 {
     max-width: 30rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.25);
     width: 25vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.25);
     grid-column: span 3; }
     .material-grid__col--medium--3.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 3; }
@@ -920,11 +1049,16 @@ body {
 > .material-grid__height--medium--3 {
     grid-row: span 3;
     height: 25vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.25);
     min-height: 25vw;
-    max-height: 30rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.25);
+    max-height: 30rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.25); }
   .material-grid__col--medium--4 {
     max-width: 39.996rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.3333);
     width: 33.33vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.3333);
     grid-column: span 4; }
     .material-grid__col--medium--4.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 4; }
@@ -932,11 +1066,16 @@ body {
 > .material-grid__height--medium--4 {
     grid-row: span 4;
     height: 33.33vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.3333);
     min-height: 33.33vw;
-    max-height: 39.996rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.3333);
+    max-height: 39.996rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.3333); }
   .material-grid__col--medium--5 {
     max-width: 49.992rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.4166);
     width: 41.66vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.4166);
     grid-column: span 5; }
     .material-grid__col--medium--5.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 5; }
@@ -944,11 +1083,16 @@ body {
 > .material-grid__height--medium--5 {
     grid-row: span 5;
     height: 41.66vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.4166);
     min-height: 41.66vw;
-    max-height: 49.992rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.4166);
+    max-height: 49.992rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.4166); }
   .material-grid__col--medium--6 {
     max-width: 60rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.5);
     width: 50vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.5);
     grid-column: span 6; }
     .material-grid__col--medium--6.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 6; }
@@ -956,11 +1100,16 @@ body {
 > .material-grid__height--medium--6 {
     grid-row: span 6;
     height: 50vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.5);
     min-height: 50vw;
-    max-height: 60rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.5);
+    max-height: 60rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.5); }
   .material-grid__col--medium--7 {
     max-width: 69.996rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.5833);
     width: 58.33vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.5833);
     grid-column: span 7; }
     .material-grid__col--medium--7.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 7; }
@@ -968,11 +1117,16 @@ body {
 > .material-grid__height--medium--7 {
     grid-row: span 7;
     height: 58.33vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.5833);
     min-height: 58.33vw;
-    max-height: 69.996rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.5833);
+    max-height: 69.996rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.5833); }
   .material-grid__col--medium--8 {
     max-width: 79.992rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.6666);
     width: 66.66vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.6666);
     grid-column: span 8; }
     .material-grid__col--medium--8.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 8; }
@@ -980,11 +1134,16 @@ body {
 > .material-grid__height--medium--8 {
     grid-row: span 8;
     height: 66.66vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.6666);
     min-height: 66.66vw;
-    max-height: 79.992rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.6666);
+    max-height: 79.992rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.6666); }
   .material-grid__col--medium--9 {
     max-width: 90rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.75);
     width: 75vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.75);
     grid-column: span 9; }
     .material-grid__col--medium--9.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 9; }
@@ -992,11 +1151,16 @@ body {
 > .material-grid__height--medium--9 {
     grid-row: span 9;
     height: 75vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.75);
     min-height: 75vw;
-    max-height: 90rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.75);
+    max-height: 90rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.75); }
   .material-grid__col--medium--10 {
     max-width: 99.996rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.8333);
     width: 83.33vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.8333);
     grid-column: span 10; }
     .material-grid__col--medium--10.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 10; }
@@ -1004,11 +1168,16 @@ body {
 > .material-grid__height--medium--10 {
     grid-row: span 10;
     height: 83.33vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.8333);
     min-height: 83.33vw;
-    max-height: 99.996rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.8333);
+    max-height: 99.996rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.8333); }
   .material-grid__col--medium--11 {
     max-width: 109.992rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 0.9166);
     width: 91.66vw;
+    width: calc((100vw - var(--scrollbar-width))* 0.9166);
     grid-column: span 11; }
     .material-grid__col--medium--11.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 11; }
@@ -1016,11 +1185,16 @@ body {
 > .material-grid__height--medium--11 {
     grid-row: span 11;
     height: 91.66vw;
+    height: calc((100vw - var(--scrollbar-width))* 0.9166);
     min-height: 91.66vw;
-    max-height: 109.992rem; }
+    min-height: calc((100vw - var(--scrollbar-width))* 0.9166);
+    max-height: 109.992rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 0.9166); }
   .material-grid__col--medium--12 {
     max-width: 120rem;
+    max-width: calc((120rem - var(--scrollbar-width))* 1);
     width: 100vw;
+    width: calc((100vw - var(--scrollbar-width))* 1);
     grid-column: span 12; }
     .material-grid__col--medium--12.material-grid > *:not([class*="material-grid__col"]) {
       grid-column: span 12; }
@@ -1028,8 +1202,11 @@ body {
 > .material-grid__height--medium--12 {
     grid-row: span 12;
     height: 100vw;
+    height: calc((100vw - var(--scrollbar-width))* 1);
     min-height: 100vw;
-    max-height: 120rem; } }
+    min-height: calc((100vw - var(--scrollbar-width))* 1);
+    max-height: 120rem;
+    max-height: calc((120rem - var(--scrollbar-width))* 1); } }
 
 @media screen and (min-width: 120rem) {
   .material-grid__col--xsmall--0--only {
@@ -1060,11 +1237,13 @@ body {
     padding-bottom: 1rem;
     padding-top: 1rem; }
   .material-grid {
-    grid-template-columns: repeat(auto-fill, 9.996rem); }
+    grid-template-columns: repeat(auto-fill, 9.996rem);
+    grid-template-columns: repeat(auto-fill, calc((120rem - var(--scrollbar-width))* 0.0833)); }
     .material-grid.material-grid--fixed-columns {
       grid-template-columns: repeat(auto-fill, 10rem); }
     .material-grid.material-grid--fluid-rows {
-      grid-auto-rows: 9.996rem; }
+      grid-auto-rows: 9.996rem;
+      grid-auto-rows: calc((120rem - var(--scrollbar-width))* 0.0833); }
   [class*="material-grid__col--"] {
     min-width: 0; } }
 
diff --git a/examples/material/css-gridish/css/material-grid-legacy.min.css b/examples/material/css-gridish/css/material-grid-legacy.min.css
index 0475fcd..f8eb576 100755
--- a/examples/material/css-gridish/css/material-grid-legacy.min.css
+++ b/examples/material/css-gridish/css/material-grid-legacy.min.css
@@ -1 +1 @@
-html{font-size:16px}body{margin:0}.material-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:120rem;overflow-x:hidden;width:100vw}.material-container--left{margin-left:0}.material-container--right{margin-right:0}.material-grid{align-items:flex-start;box-sizing:border-box;display:flex;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,25vw)}.material-grid>*{box-sizing:border-box;width:100%;grid-column:span 4}.material-grid>* :last-child,.material-grid>* :last-child>:last-child,.material-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=material-padding]{box-sizing:border-box}@supports (display:grid){.material-grid{align-items:unset}.material-grid>*{width:initial;height:100%}:root{--material-height-1:0.5rem;--material-height-2:1rem;--material-height-3:1.5rem;--material-height-4:2rem;--material-height-5:2.5rem;--material-height-6:3rem;--material-height-7:3.5rem;--material-height-8:4rem;--material-height-9:4.5rem;--material-height-10:5rem;--material-height-11:5.5rem;--material-height-12:6rem;--material-height-13:6.5rem;--material-height-14:7rem;--material-height-15:7.5rem;--material-height-16:8rem;--material-height-17:8.5rem;--material-height-18:9rem;--material-height-19:9.5rem;--material-height-20:10rem;--material-height-21:10.5rem;--material-height-22:11rem;--material-height-23:11.5rem;--material-height-24:12rem;--material-height-25:12.5rem;--material-height-26:13rem;--material-height-27:13.5rem;--material-height-28:14rem;--material-height-29:14.5rem}}.material-grid__height--xsmall--0{height:0;min-height:0}.material-grid__height--xsmall--1{grid-row:span 1;height:.5rem;min-height:.5rem}.material-grid__height--xsmall--2{grid-row:span 2;height:1rem;min-height:1rem}.material-grid__height--xsmall--3{grid-row:span 3;height:1.5rem;min-height:1.5rem}.material-grid__height--xsmall--4{grid-row:span 4;height:2rem;min-height:2rem}.material-grid__height--xsmall--5{grid-row:span 5;height:2.5rem;min-height:2.5rem}.material-grid__height--xsmall--6{grid-row:span 6;height:3rem;min-height:3rem}.material-grid__height--xsmall--7{grid-row:span 7;height:3.5rem;min-height:3.5rem}.material-grid__height--xsmall--8{grid-row:span 8;height:4rem;min-height:4rem}.material-grid__height--xsmall--9{grid-row:span 9;height:4.5rem;min-height:4.5rem}.material-grid__height--xsmall--10{grid-row:span 10;height:5rem;min-height:5rem}.material-grid__height--xsmall--11{grid-row:span 11;height:5.5rem;min-height:5.5rem}.material-grid__height--xsmall--12{grid-row:span 12;height:6rem;min-height:6rem}.material-grid__height--xsmall--13{grid-row:span 13;height:6.5rem;min-height:6.5rem}.material-grid__height--xsmall--14{grid-row:span 14;height:7rem;min-height:7rem}.material-grid__height--xsmall--15{grid-row:span 15;height:7.5rem;min-height:7.5rem}.material-grid__height--xsmall--16{grid-row:span 16;height:8rem;min-height:8rem}.material-grid__height--xsmall--17{grid-row:span 17;height:8.5rem;min-height:8.5rem}.material-grid__height--xsmall--18{grid-row:span 18;height:9rem;min-height:9rem}.material-grid__height--xsmall--19{grid-row:span 19;height:9.5rem;min-height:9.5rem}.material-grid__height--xsmall--20{grid-row:span 20;height:10rem;min-height:10rem}.material-grid__height--xsmall--21{grid-row:span 21;height:10.5rem;min-height:10.5rem}.material-grid__height--xsmall--22{grid-row:span 22;height:11rem;min-height:11rem}.material-grid__height--xsmall--23{grid-row:span 23;height:11.5rem;min-height:11.5rem}.material-grid__height--xsmall--24{grid-row:span 24;height:12rem;min-height:12rem}.material-grid__height--xsmall--25{grid-row:span 25;height:12.5rem;min-height:12.5rem}.material-grid__height--xsmall--26{grid-row:span 26;height:13rem;min-height:13rem}.material-grid__height--xsmall--27{grid-row:span 27;height:13.5rem;min-height:13.5rem}.material-grid__height--xsmall--28{grid-row:span 28;height:14rem;min-height:14rem}.material-grid__height--xsmall--29{grid-row:span 29;height:14.5rem;min-height:14.5rem}[class*=material-grid__col--xsmall--]{display:block}.material-grid__col--xsmall--0,.material-grid__col--xsmall--0--only{display:none}.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.625rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:25vw}.material-grid__col--xsmall--1{width:25vw;grid-column:span 1}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1;height:25vw;min-height:25vw}.material-grid__col--xsmall--2{width:50vw;grid-column:span 2}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2;height:50vw;min-height:50vw}.material-grid__col--xsmall--3{width:75vw;grid-column:span 3}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3;height:75vw;min-height:75vw}.material-grid__col--xsmall--4{width:100vw;grid-column:span 4}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4;height:100vw;min-height:100vw}@media screen and (min-width:37.5rem){.material-grid__height--small--0{height:0;min-height:0}.material-grid__height--small--1{grid-row:span 1;height:.5rem;min-height:.5rem}.material-grid__height--small--2{grid-row:span 2;height:1rem;min-height:1rem}.material-grid__height--small--3{grid-row:span 3;height:1.5rem;min-height:1.5rem}.material-grid__height--small--4{grid-row:span 4;height:2rem;min-height:2rem}.material-grid__height--small--5{grid-row:span 5;height:2.5rem;min-height:2.5rem}.material-grid__height--small--6{grid-row:span 6;height:3rem;min-height:3rem}.material-grid__height--small--7{grid-row:span 7;height:3.5rem;min-height:3.5rem}.material-grid__height--small--8{grid-row:span 8;height:4rem;min-height:4rem}.material-grid__height--small--9{grid-row:span 9;height:4.5rem;min-height:4.5rem}.material-grid__height--small--10{grid-row:span 10;height:5rem;min-height:5rem}.material-grid__height--small--11{grid-row:span 11;height:5.5rem;min-height:5.5rem}.material-grid__height--small--12{grid-row:span 12;height:6rem;min-height:6rem}.material-grid__height--small--13{grid-row:span 13;height:6.5rem;min-height:6.5rem}.material-grid__height--small--14{grid-row:span 14;height:7rem;min-height:7rem}.material-grid__height--small--15{grid-row:span 15;height:7.5rem;min-height:7.5rem}.material-grid__height--small--16{grid-row:span 16;height:8rem;min-height:8rem}.material-grid__height--small--17{grid-row:span 17;height:8.5rem;min-height:8.5rem}.material-grid__height--small--18{grid-row:span 18;height:9rem;min-height:9rem}.material-grid__height--small--19{grid-row:span 19;height:9.5rem;min-height:9.5rem}.material-grid__height--small--20{grid-row:span 20;height:10rem;min-height:10rem}.material-grid__height--small--21{grid-row:span 21;height:10.5rem;min-height:10.5rem}.material-grid__height--small--22{grid-row:span 22;height:11rem;min-height:11rem}.material-grid__height--small--23{grid-row:span 23;height:11.5rem;min-height:11.5rem}.material-grid__height--small--24{grid-row:span 24;height:12rem;min-height:12rem}.material-grid__height--small--25{grid-row:span 25;height:12.5rem;min-height:12.5rem}.material-grid__height--small--26{grid-row:span 26;height:13rem;min-height:13rem}.material-grid__height--small--27{grid-row:span 27;height:13.5rem;min-height:13.5rem}.material-grid__height--small--28{grid-row:span 28;height:14rem;min-height:14rem}.material-grid__height--small--29{grid-row:span 29;height:14.5rem;min-height:14.5rem}.material-grid__col--xsmall--0--only,[class*=material-grid__col--small--]{display:block}.material-grid__col--small--0,.material-grid__col--small--0--only{display:none}.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid{grid-template-columns:repeat(auto-fill,12.5vw)}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,4.6875rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:12.5vw}.material-grid>*{grid-column:span 8}.material-grid__col--xsmall--1{width:25vw;grid-column:span 2}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1;height:25vw;min-height:25vw}.material-grid__col--xsmall--2{width:50vw;grid-column:span 4}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2;height:50vw;min-height:50vw}.material-grid__col--xsmall--3{width:75vw;grid-column:span 6}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3;height:75vw;min-height:75vw}.material-grid__col--xsmall--4{width:100vw;grid-column:span 8}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4;height:100vw;min-height:100vw}.material-grid__col--small--1{width:12.5vw;grid-column:span 1}.material-grid__col--small--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--small--1{grid-row:span 1;height:12.5vw;min-height:12.5vw}.material-grid__col--small--2{width:25vw;grid-column:span 2}.material-grid__col--small--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--small--2{grid-row:span 2;height:25vw;min-height:25vw}.material-grid__col--small--3{width:37.5vw;grid-column:span 3}.material-grid__col--small--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--small--3{grid-row:span 3;height:37.5vw;min-height:37.5vw}.material-grid__col--small--4{width:50vw;grid-column:span 4}.material-grid__col--small--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--small--4{grid-row:span 4;height:50vw;min-height:50vw}.material-grid__col--small--5{width:62.5vw;grid-column:span 5}.material-grid__col--small--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid--fluid-rows>.material-grid__height--small--5{grid-row:span 5;height:62.5vw;min-height:62.5vw}.material-grid__col--small--6{width:75vw;grid-column:span 6}.material-grid__col--small--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid--fluid-rows>.material-grid__height--small--6{grid-row:span 6;height:75vw;min-height:75vw}.material-grid__col--small--7{width:87.5vw;grid-column:span 7}.material-grid__col--small--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid--fluid-rows>.material-grid__height--small--7{grid-row:span 7;height:87.5vw;min-height:87.5vw}.material-grid__col--small--8{width:100vw;grid-column:span 8}.material-grid__col--small--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid--fluid-rows>.material-grid__height--small--8{grid-row:span 8;height:100vw;min-height:100vw}}@media screen and (min-width:64rem){.material-grid__height--medium--0{height:0;min-height:0}.material-grid__height--medium--1{grid-row:span 1;height:.5rem;min-height:.5rem}.material-grid__height--medium--2{grid-row:span 2;height:1rem;min-height:1rem}.material-grid__height--medium--3{grid-row:span 3;height:1.5rem;min-height:1.5rem}.material-grid__height--medium--4{grid-row:span 4;height:2rem;min-height:2rem}.material-grid__height--medium--5{grid-row:span 5;height:2.5rem;min-height:2.5rem}.material-grid__height--medium--6{grid-row:span 6;height:3rem;min-height:3rem}.material-grid__height--medium--7{grid-row:span 7;height:3.5rem;min-height:3.5rem}.material-grid__height--medium--8{grid-row:span 8;height:4rem;min-height:4rem}.material-grid__height--medium--9{grid-row:span 9;height:4.5rem;min-height:4.5rem}.material-grid__height--medium--10{grid-row:span 10;height:5rem;min-height:5rem}.material-grid__height--medium--11{grid-row:span 11;height:5.5rem;min-height:5.5rem}.material-grid__height--medium--12{grid-row:span 12;height:6rem;min-height:6rem}.material-grid__height--medium--13{grid-row:span 13;height:6.5rem;min-height:6.5rem}.material-grid__height--medium--14{grid-row:span 14;height:7rem;min-height:7rem}.material-grid__height--medium--15{grid-row:span 15;height:7.5rem;min-height:7.5rem}.material-grid__height--medium--16{grid-row:span 16;height:8rem;min-height:8rem}.material-grid__height--medium--17{grid-row:span 17;height:8.5rem;min-height:8.5rem}.material-grid__height--medium--18{grid-row:span 18;height:9rem;min-height:9rem}.material-grid__height--medium--19{grid-row:span 19;height:9.5rem;min-height:9.5rem}.material-grid__height--medium--20{grid-row:span 20;height:10rem;min-height:10rem}.material-grid__height--medium--21{grid-row:span 21;height:10.5rem;min-height:10.5rem}.material-grid__height--medium--22{grid-row:span 22;height:11rem;min-height:11rem}.material-grid__height--medium--23{grid-row:span 23;height:11.5rem;min-height:11.5rem}.material-grid__height--medium--24{grid-row:span 24;height:12rem;min-height:12rem}.material-grid__height--medium--25{grid-row:span 25;height:12.5rem;min-height:12.5rem}.material-grid__height--medium--26{grid-row:span 26;height:13rem;min-height:13rem}.material-grid__height--medium--27{grid-row:span 27;height:13.5rem;min-height:13.5rem}.material-grid__height--medium--28{grid-row:span 28;height:14rem;min-height:14rem}.material-grid__height--medium--29{grid-row:span 29;height:14.5rem;min-height:14.5rem}.material-grid__col--small--0--only,.material-grid__col--xsmall--0--only,[class*=material-grid__col--medium--]{display:block}.material-grid__col--medium--0,.material-grid__col--medium--0--only{display:none}.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,8.33vw)}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.33333rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:8.33vw}.material-grid>*{grid-column:span 12}.material-grid__col--xsmall--1{max-width:30rem;width:25vw;grid-column:span 3}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1;height:25vw;min-height:25vw;max-height:30rem}.material-grid__col--xsmall--2{max-width:60rem;width:50vw;grid-column:span 6}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2;height:50vw;min-height:50vw;max-height:60rem}.material-grid__col--xsmall--3{max-width:90rem;width:75vw;grid-column:span 9}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3;height:75vw;min-height:75vw;max-height:90rem}.material-grid__col--xsmall--4{max-width:120rem;width:100vw;grid-column:span 12}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4;height:100vw;min-height:100vw;max-height:120rem}.material-grid__col--small--1{max-width:15rem;width:12.5vw;grid-column:span 1.5}.material-grid__col--small--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--small--1{grid-row:span 1;height:12.5vw;min-height:12.5vw;max-height:15rem}.material-grid__col--small--2{max-width:30rem;width:25vw;grid-column:span 3}.material-grid__col--small--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--small--2{grid-row:span 2;height:25vw;min-height:25vw;max-height:30rem}.material-grid__col--small--3{max-width:45rem;width:37.5vw;grid-column:span 4.5}.material-grid__col--small--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--small--3{grid-row:span 3;height:37.5vw;min-height:37.5vw;max-height:45rem}.material-grid__col--small--4{max-width:60rem;width:50vw;grid-column:span 6}.material-grid__col--small--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--small--4{grid-row:span 4;height:50vw;min-height:50vw;max-height:60rem}.material-grid__col--small--5{max-width:75rem;width:62.5vw;grid-column:span 7.5}.material-grid__col--small--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid--fluid-rows>.material-grid__height--small--5{grid-row:span 5;height:62.5vw;min-height:62.5vw;max-height:75rem}.material-grid__col--small--6{max-width:90rem;width:75vw;grid-column:span 9}.material-grid__col--small--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid--fluid-rows>.material-grid__height--small--6{grid-row:span 6;height:75vw;min-height:75vw;max-height:90rem}.material-grid__col--small--7{max-width:105rem;width:87.5vw;grid-column:span 10.5}.material-grid__col--small--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid--fluid-rows>.material-grid__height--small--7{grid-row:span 7;height:87.5vw;min-height:87.5vw;max-height:105rem}.material-grid__col--small--8{max-width:120rem;width:100vw;grid-column:span 12}.material-grid__col--small--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid--fluid-rows>.material-grid__height--small--8{grid-row:span 8;height:100vw;min-height:100vw;max-height:120rem}.material-grid__col--medium--1{max-width:9.996rem;width:8.33vw;grid-column:span 1}.material-grid__col--medium--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--medium--1{grid-row:span 1;height:8.33vw;min-height:8.33vw;max-height:9.996rem}.material-grid__col--medium--2{max-width:19.992rem;width:16.66vw;grid-column:span 2}.material-grid__col--medium--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--medium--2{grid-row:span 2;height:16.66vw;min-height:16.66vw;max-height:19.992rem}.material-grid__col--medium--3{max-width:30rem;width:25vw;grid-column:span 3}.material-grid__col--medium--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--medium--3{grid-row:span 3;height:25vw;min-height:25vw;max-height:30rem}.material-grid__col--medium--4{max-width:39.996rem;width:33.33vw;grid-column:span 4}.material-grid__col--medium--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--medium--4{grid-row:span 4;height:33.33vw;min-height:33.33vw;max-height:39.996rem}.material-grid__col--medium--5{max-width:49.992rem;width:41.66vw;grid-column:span 5}.material-grid__col--medium--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid--fluid-rows>.material-grid__height--medium--5{grid-row:span 5;height:41.66vw;min-height:41.66vw;max-height:49.992rem}.material-grid__col--medium--6{max-width:60rem;width:50vw;grid-column:span 6}.material-grid__col--medium--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid--fluid-rows>.material-grid__height--medium--6{grid-row:span 6;height:50vw;min-height:50vw;max-height:60rem}.material-grid__col--medium--7{max-width:69.996rem;width:58.33vw;grid-column:span 7}.material-grid__col--medium--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid--fluid-rows>.material-grid__height--medium--7{grid-row:span 7;height:58.33vw;min-height:58.33vw;max-height:69.996rem}.material-grid__col--medium--8{max-width:79.992rem;width:66.66vw;grid-column:span 8}.material-grid__col--medium--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid--fluid-rows>.material-grid__height--medium--8{grid-row:span 8;height:66.66vw;min-height:66.66vw;max-height:79.992rem}.material-grid__col--medium--9{max-width:90rem;width:75vw;grid-column:span 9}.material-grid__col--medium--9.material-grid>:not([class*=material-grid__col]){grid-column:span 9}.material-grid--fluid-rows>.material-grid__height--medium--9{grid-row:span 9;height:75vw;min-height:75vw;max-height:90rem}.material-grid__col--medium--10{max-width:99.996rem;width:83.33vw;grid-column:span 10}.material-grid__col--medium--10.material-grid>:not([class*=material-grid__col]){grid-column:span 10}.material-grid--fluid-rows>.material-grid__height--medium--10{grid-row:span 10;height:83.33vw;min-height:83.33vw;max-height:99.996rem}.material-grid__col--medium--11{max-width:109.992rem;width:91.66vw;grid-column:span 11}.material-grid__col--medium--11.material-grid>:not([class*=material-grid__col]){grid-column:span 11}.material-grid--fluid-rows>.material-grid__height--medium--11{grid-row:span 11;height:91.66vw;min-height:91.66vw;max-height:109.992rem}.material-grid__col--medium--12{max-width:120rem;width:100vw;grid-column:span 12}.material-grid__col--medium--12.material-grid>:not([class*=material-grid__col]){grid-column:span 12}.material-grid--fluid-rows>.material-grid__height--medium--12{grid-row:span 12;height:100vw;min-height:100vw;max-height:120rem}}@media screen and (min-width:120rem){.material-grid__col--medium--0--only,.material-grid__col--small--0--only,.material-grid__col--xsmall--0--only,[class*=material-grid__col--xlarge--]{display:block}.material-grid__col--xlarge--0,.material-grid__col--xlarge--0--only{display:none}.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,9.996rem)}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,10rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:9.996rem}[class*=material-grid__col--]{min-width:0}}@supports (display:grid){.material-grid>*,.material-grid>[class*=material-grid__col--]{min-width:initial;max-width:initial;width:initial}.material-grid>.material-grid,.material-grid>[class*=material-grid__col--].material-grid{display:grid}.material-grid>[class*=material-grid__height--]{height:unset;max-height:unset;min-height:initial}}.material-grid>script{display:none}
\ No newline at end of file
+html{font-size:16px}body{margin:0}.material-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:120rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.material-container--left{margin-left:0}.material-container--right{margin-right:0}.material-grid{align-items:flex-start;box-sizing:border-box;display:flex;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,25vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .25))}.material-grid>*{box-sizing:border-box;width:100%;grid-column:span 4}.material-grid>* :last-child,.material-grid>* :last-child>:last-child,.material-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=material-padding]{box-sizing:border-box}:root{--scrollbar-width:0px}@supports (display:grid){.material-grid{align-items:unset}.material-grid>*{width:initial;height:100%}:root{--material-height-1:0.5rem;--material-height-2:1rem;--material-height-3:1.5rem;--material-height-4:2rem;--material-height-5:2.5rem;--material-height-6:3rem;--material-height-7:3.5rem;--material-height-8:4rem;--material-height-9:4.5rem;--material-height-10:5rem;--material-height-11:5.5rem;--material-height-12:6rem;--material-height-13:6.5rem;--material-height-14:7rem;--material-height-15:7.5rem;--material-height-16:8rem;--material-height-17:8.5rem;--material-height-18:9rem;--material-height-19:9.5rem;--material-height-20:10rem;--material-height-21:10.5rem;--material-height-22:11rem;--material-height-23:11.5rem;--material-height-24:12rem;--material-height-25:12.5rem;--material-height-26:13rem;--material-height-27:13.5rem;--material-height-28:14rem;--material-height-29:14.5rem}}.material-grid__height--xsmall--0{height:0;min-height:0}.material-grid__height--xsmall--1{grid-row:span 1;height:.5rem;min-height:.5rem}.material-grid__height--xsmall--2{grid-row:span 2;height:1rem;min-height:1rem}.material-grid__height--xsmall--3{grid-row:span 3;height:1.5rem;min-height:1.5rem}.material-grid__height--xsmall--4{grid-row:span 4;height:2rem;min-height:2rem}.material-grid__height--xsmall--5{grid-row:span 5;height:2.5rem;min-height:2.5rem}.material-grid__height--xsmall--6{grid-row:span 6;height:3rem;min-height:3rem}.material-grid__height--xsmall--7{grid-row:span 7;height:3.5rem;min-height:3.5rem}.material-grid__height--xsmall--8{grid-row:span 8;height:4rem;min-height:4rem}.material-grid__height--xsmall--9{grid-row:span 9;height:4.5rem;min-height:4.5rem}.material-grid__height--xsmall--10{grid-row:span 10;height:5rem;min-height:5rem}.material-grid__height--xsmall--11{grid-row:span 11;height:5.5rem;min-height:5.5rem}.material-grid__height--xsmall--12{grid-row:span 12;height:6rem;min-height:6rem}.material-grid__height--xsmall--13{grid-row:span 13;height:6.5rem;min-height:6.5rem}.material-grid__height--xsmall--14{grid-row:span 14;height:7rem;min-height:7rem}.material-grid__height--xsmall--15{grid-row:span 15;height:7.5rem;min-height:7.5rem}.material-grid__height--xsmall--16{grid-row:span 16;height:8rem;min-height:8rem}.material-grid__height--xsmall--17{grid-row:span 17;height:8.5rem;min-height:8.5rem}.material-grid__height--xsmall--18{grid-row:span 18;height:9rem;min-height:9rem}.material-grid__height--xsmall--19{grid-row:span 19;height:9.5rem;min-height:9.5rem}.material-grid__height--xsmall--20{grid-row:span 20;height:10rem;min-height:10rem}.material-grid__height--xsmall--21{grid-row:span 21;height:10.5rem;min-height:10.5rem}.material-grid__height--xsmall--22{grid-row:span 22;height:11rem;min-height:11rem}.material-grid__height--xsmall--23{grid-row:span 23;height:11.5rem;min-height:11.5rem}.material-grid__height--xsmall--24{grid-row:span 24;height:12rem;min-height:12rem}.material-grid__height--xsmall--25{grid-row:span 25;height:12.5rem;min-height:12.5rem}.material-grid__height--xsmall--26{grid-row:span 26;height:13rem;min-height:13rem}.material-grid__height--xsmall--27{grid-row:span 27;height:13.5rem;min-height:13.5rem}.material-grid__height--xsmall--28{grid-row:span 28;height:14rem;min-height:14rem}.material-grid__height--xsmall--29{grid-row:span 29;height:14.5rem;min-height:14.5rem}[class*=material-grid__col--xsmall--]{display:block}.material-grid__col--xsmall--0,.material-grid__col--xsmall--0--only{display:none}.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.625rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:25vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__col--xsmall--1{width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 1}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__col--xsmall--2{width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 2}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5)}.material-grid__col--xsmall--3{width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 3}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75)}.material-grid__col--xsmall--4{width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 4}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1)}@media screen and (min-width:37.5rem){.material-grid__height--small--0{height:0;min-height:0}.material-grid__height--small--1{grid-row:span 1;height:.5rem;min-height:.5rem}.material-grid__height--small--2{grid-row:span 2;height:1rem;min-height:1rem}.material-grid__height--small--3{grid-row:span 3;height:1.5rem;min-height:1.5rem}.material-grid__height--small--4{grid-row:span 4;height:2rem;min-height:2rem}.material-grid__height--small--5{grid-row:span 5;height:2.5rem;min-height:2.5rem}.material-grid__height--small--6{grid-row:span 6;height:3rem;min-height:3rem}.material-grid__height--small--7{grid-row:span 7;height:3.5rem;min-height:3.5rem}.material-grid__height--small--8{grid-row:span 8;height:4rem;min-height:4rem}.material-grid__height--small--9{grid-row:span 9;height:4.5rem;min-height:4.5rem}.material-grid__height--small--10{grid-row:span 10;height:5rem;min-height:5rem}.material-grid__height--small--11{grid-row:span 11;height:5.5rem;min-height:5.5rem}.material-grid__height--small--12{grid-row:span 12;height:6rem;min-height:6rem}.material-grid__height--small--13{grid-row:span 13;height:6.5rem;min-height:6.5rem}.material-grid__height--small--14{grid-row:span 14;height:7rem;min-height:7rem}.material-grid__height--small--15{grid-row:span 15;height:7.5rem;min-height:7.5rem}.material-grid__height--small--16{grid-row:span 16;height:8rem;min-height:8rem}.material-grid__height--small--17{grid-row:span 17;height:8.5rem;min-height:8.5rem}.material-grid__height--small--18{grid-row:span 18;height:9rem;min-height:9rem}.material-grid__height--small--19{grid-row:span 19;height:9.5rem;min-height:9.5rem}.material-grid__height--small--20{grid-row:span 20;height:10rem;min-height:10rem}.material-grid__height--small--21{grid-row:span 21;height:10.5rem;min-height:10.5rem}.material-grid__height--small--22{grid-row:span 22;height:11rem;min-height:11rem}.material-grid__height--small--23{grid-row:span 23;height:11.5rem;min-height:11.5rem}.material-grid__height--small--24{grid-row:span 24;height:12rem;min-height:12rem}.material-grid__height--small--25{grid-row:span 25;height:12.5rem;min-height:12.5rem}.material-grid__height--small--26{grid-row:span 26;height:13rem;min-height:13rem}.material-grid__height--small--27{grid-row:span 27;height:13.5rem;min-height:13.5rem}.material-grid__height--small--28{grid-row:span 28;height:14rem;min-height:14rem}.material-grid__height--small--29{grid-row:span 29;height:14.5rem;min-height:14.5rem}.material-grid__col--xsmall--0--only,[class*=material-grid__col--small--]{display:block}.material-grid__col--small--0,.material-grid__col--small--0--only{display:none}.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid{grid-template-columns:repeat(auto-fill,12.5vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .125))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,4.6875rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:12.5vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .125)}.material-grid>*{grid-column:span 8}.material-grid__col--xsmall--1{width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 2}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__col--xsmall--2{width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 4}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5)}.material-grid__col--xsmall--3{width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 6}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75)}.material-grid__col--xsmall--4{width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 8}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1)}.material-grid__col--small--1{width:12.5vw;width:calc((100vw - var(--scrollbar-width))* .125);grid-column:span 1}.material-grid__col--small--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--small--1{grid-row:span 1;height:12.5vw;height:calc((100vw - var(--scrollbar-width))* .125);min-height:12.5vw;min-height:calc((100vw - var(--scrollbar-width))* .125)}.material-grid__col--small--2{width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 2}.material-grid__col--small--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--small--2{grid-row:span 2;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__col--small--3{width:37.5vw;width:calc((100vw - var(--scrollbar-width))* .375);grid-column:span 3}.material-grid__col--small--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--small--3{grid-row:span 3;height:37.5vw;height:calc((100vw - var(--scrollbar-width))* .375);min-height:37.5vw;min-height:calc((100vw - var(--scrollbar-width))* .375)}.material-grid__col--small--4{width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 4}.material-grid__col--small--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--small--4{grid-row:span 4;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5)}.material-grid__col--small--5{width:62.5vw;width:calc((100vw - var(--scrollbar-width))* .625);grid-column:span 5}.material-grid__col--small--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid--fluid-rows>.material-grid__height--small--5{grid-row:span 5;height:62.5vw;height:calc((100vw - var(--scrollbar-width))* .625);min-height:62.5vw;min-height:calc((100vw - var(--scrollbar-width))* .625)}.material-grid__col--small--6{width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 6}.material-grid__col--small--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid--fluid-rows>.material-grid__height--small--6{grid-row:span 6;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75)}.material-grid__col--small--7{width:87.5vw;width:calc((100vw - var(--scrollbar-width))* .875);grid-column:span 7}.material-grid__col--small--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid--fluid-rows>.material-grid__height--small--7{grid-row:span 7;height:87.5vw;height:calc((100vw - var(--scrollbar-width))* .875);min-height:87.5vw;min-height:calc((100vw - var(--scrollbar-width))* .875)}.material-grid__col--small--8{width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 8}.material-grid__col--small--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid--fluid-rows>.material-grid__height--small--8{grid-row:span 8;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1)}}@media screen and (min-width:64rem){.material-grid__height--medium--0{height:0;min-height:0}.material-grid__height--medium--1{grid-row:span 1;height:.5rem;min-height:.5rem}.material-grid__height--medium--2{grid-row:span 2;height:1rem;min-height:1rem}.material-grid__height--medium--3{grid-row:span 3;height:1.5rem;min-height:1.5rem}.material-grid__height--medium--4{grid-row:span 4;height:2rem;min-height:2rem}.material-grid__height--medium--5{grid-row:span 5;height:2.5rem;min-height:2.5rem}.material-grid__height--medium--6{grid-row:span 6;height:3rem;min-height:3rem}.material-grid__height--medium--7{grid-row:span 7;height:3.5rem;min-height:3.5rem}.material-grid__height--medium--8{grid-row:span 8;height:4rem;min-height:4rem}.material-grid__height--medium--9{grid-row:span 9;height:4.5rem;min-height:4.5rem}.material-grid__height--medium--10{grid-row:span 10;height:5rem;min-height:5rem}.material-grid__height--medium--11{grid-row:span 11;height:5.5rem;min-height:5.5rem}.material-grid__height--medium--12{grid-row:span 12;height:6rem;min-height:6rem}.material-grid__height--medium--13{grid-row:span 13;height:6.5rem;min-height:6.5rem}.material-grid__height--medium--14{grid-row:span 14;height:7rem;min-height:7rem}.material-grid__height--medium--15{grid-row:span 15;height:7.5rem;min-height:7.5rem}.material-grid__height--medium--16{grid-row:span 16;height:8rem;min-height:8rem}.material-grid__height--medium--17{grid-row:span 17;height:8.5rem;min-height:8.5rem}.material-grid__height--medium--18{grid-row:span 18;height:9rem;min-height:9rem}.material-grid__height--medium--19{grid-row:span 19;height:9.5rem;min-height:9.5rem}.material-grid__height--medium--20{grid-row:span 20;height:10rem;min-height:10rem}.material-grid__height--medium--21{grid-row:span 21;height:10.5rem;min-height:10.5rem}.material-grid__height--medium--22{grid-row:span 22;height:11rem;min-height:11rem}.material-grid__height--medium--23{grid-row:span 23;height:11.5rem;min-height:11.5rem}.material-grid__height--medium--24{grid-row:span 24;height:12rem;min-height:12rem}.material-grid__height--medium--25{grid-row:span 25;height:12.5rem;min-height:12.5rem}.material-grid__height--medium--26{grid-row:span 26;height:13rem;min-height:13rem}.material-grid__height--medium--27{grid-row:span 27;height:13.5rem;min-height:13.5rem}.material-grid__height--medium--28{grid-row:span 28;height:14rem;min-height:14rem}.material-grid__height--medium--29{grid-row:span 29;height:14.5rem;min-height:14.5rem}.material-grid__col--small--0--only,.material-grid__col--xsmall--0--only,[class*=material-grid__col--medium--]{display:block}.material-grid__col--medium--0,.material-grid__col--medium--0--only{display:none}.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,8.33vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .0833))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.33333rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:8.33vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .0833)}.material-grid>*{grid-column:span 12}.material-grid__col--xsmall--1{max-width:30rem;max-width:calc((120rem - var(--scrollbar-width))* .25);width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 3}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25);max-height:30rem;max-height:calc((120rem - var(--scrollbar-width))* .25)}.material-grid__col--xsmall--2{max-width:60rem;max-width:calc((120rem - var(--scrollbar-width))* .5);width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 6}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5);max-height:60rem;max-height:calc((120rem - var(--scrollbar-width))* .5)}.material-grid__col--xsmall--3{max-width:90rem;max-width:calc((120rem - var(--scrollbar-width))* .75);width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 9}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75);max-height:90rem;max-height:calc((120rem - var(--scrollbar-width))* .75)}.material-grid__col--xsmall--4{max-width:120rem;max-width:calc((120rem - var(--scrollbar-width))* 1);width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 12}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1);max-height:120rem;max-height:calc((120rem - var(--scrollbar-width))* 1)}.material-grid__col--small--1{max-width:15rem;max-width:calc((120rem - var(--scrollbar-width))* .125);width:12.5vw;width:calc((100vw - var(--scrollbar-width))* .125);grid-column:span 1.5}.material-grid__col--small--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--small--1{grid-row:span 1;height:12.5vw;height:calc((100vw - var(--scrollbar-width))* .125);min-height:12.5vw;min-height:calc((100vw - var(--scrollbar-width))* .125);max-height:15rem;max-height:calc((120rem - var(--scrollbar-width))* .125)}.material-grid__col--small--2{max-width:30rem;max-width:calc((120rem - var(--scrollbar-width))* .25);width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 3}.material-grid__col--small--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--small--2{grid-row:span 2;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25);max-height:30rem;max-height:calc((120rem - var(--scrollbar-width))* .25)}.material-grid__col--small--3{max-width:45rem;max-width:calc((120rem - var(--scrollbar-width))* .375);width:37.5vw;width:calc((100vw - var(--scrollbar-width))* .375);grid-column:span 4.5}.material-grid__col--small--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--small--3{grid-row:span 3;height:37.5vw;height:calc((100vw - var(--scrollbar-width))* .375);min-height:37.5vw;min-height:calc((100vw - var(--scrollbar-width))* .375);max-height:45rem;max-height:calc((120rem - var(--scrollbar-width))* .375)}.material-grid__col--small--4{max-width:60rem;max-width:calc((120rem - var(--scrollbar-width))* .5);width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 6}.material-grid__col--small--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--small--4{grid-row:span 4;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5);max-height:60rem;max-height:calc((120rem - var(--scrollbar-width))* .5)}.material-grid__col--small--5{max-width:75rem;max-width:calc((120rem - var(--scrollbar-width))* .625);width:62.5vw;width:calc((100vw - var(--scrollbar-width))* .625);grid-column:span 7.5}.material-grid__col--small--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid--fluid-rows>.material-grid__height--small--5{grid-row:span 5;height:62.5vw;height:calc((100vw - var(--scrollbar-width))* .625);min-height:62.5vw;min-height:calc((100vw - var(--scrollbar-width))* .625);max-height:75rem;max-height:calc((120rem - var(--scrollbar-width))* .625)}.material-grid__col--small--6{max-width:90rem;max-width:calc((120rem - var(--scrollbar-width))* .75);width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 9}.material-grid__col--small--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid--fluid-rows>.material-grid__height--small--6{grid-row:span 6;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75);max-height:90rem;max-height:calc((120rem - var(--scrollbar-width))* .75)}.material-grid__col--small--7{max-width:105rem;max-width:calc((120rem - var(--scrollbar-width))* .875);width:87.5vw;width:calc((100vw - var(--scrollbar-width))* .875);grid-column:span 10.5}.material-grid__col--small--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid--fluid-rows>.material-grid__height--small--7{grid-row:span 7;height:87.5vw;height:calc((100vw - var(--scrollbar-width))* .875);min-height:87.5vw;min-height:calc((100vw - var(--scrollbar-width))* .875);max-height:105rem;max-height:calc((120rem - var(--scrollbar-width))* .875)}.material-grid__col--small--8{max-width:120rem;max-width:calc((120rem - var(--scrollbar-width))* 1);width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 12}.material-grid__col--small--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid--fluid-rows>.material-grid__height--small--8{grid-row:span 8;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1);max-height:120rem;max-height:calc((120rem - var(--scrollbar-width))* 1)}.material-grid__col--medium--1{max-width:9.996rem;max-width:calc((120rem - var(--scrollbar-width))* .0833);width:8.33vw;width:calc((100vw - var(--scrollbar-width))* .0833);grid-column:span 1}.material-grid__col--medium--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--medium--1{grid-row:span 1;height:8.33vw;height:calc((100vw - var(--scrollbar-width))* .0833);min-height:8.33vw;min-height:calc((100vw - var(--scrollbar-width))* .0833);max-height:9.996rem;max-height:calc((120rem - var(--scrollbar-width))* .0833)}.material-grid__col--medium--2{max-width:19.992rem;max-width:calc((120rem - var(--scrollbar-width))* .1666);width:16.66vw;width:calc((100vw - var(--scrollbar-width))* .1666);grid-column:span 2}.material-grid__col--medium--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--medium--2{grid-row:span 2;height:16.66vw;height:calc((100vw - var(--scrollbar-width))* .1666);min-height:16.66vw;min-height:calc((100vw - var(--scrollbar-width))* .1666);max-height:19.992rem;max-height:calc((120rem - var(--scrollbar-width))* .1666)}.material-grid__col--medium--3{max-width:30rem;max-width:calc((120rem - var(--scrollbar-width))* .25);width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 3}.material-grid__col--medium--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--medium--3{grid-row:span 3;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25);max-height:30rem;max-height:calc((120rem - var(--scrollbar-width))* .25)}.material-grid__col--medium--4{max-width:39.996rem;max-width:calc((120rem - var(--scrollbar-width))* .3333);width:33.33vw;width:calc((100vw - var(--scrollbar-width))* .3333);grid-column:span 4}.material-grid__col--medium--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--medium--4{grid-row:span 4;height:33.33vw;height:calc((100vw - var(--scrollbar-width))* .3333);min-height:33.33vw;min-height:calc((100vw - var(--scrollbar-width))* .3333);max-height:39.996rem;max-height:calc((120rem - var(--scrollbar-width))* .3333)}.material-grid__col--medium--5{max-width:49.992rem;max-width:calc((120rem - var(--scrollbar-width))* .4166);width:41.66vw;width:calc((100vw - var(--scrollbar-width))* .4166);grid-column:span 5}.material-grid__col--medium--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid--fluid-rows>.material-grid__height--medium--5{grid-row:span 5;height:41.66vw;height:calc((100vw - var(--scrollbar-width))* .4166);min-height:41.66vw;min-height:calc((100vw - var(--scrollbar-width))* .4166);max-height:49.992rem;max-height:calc((120rem - var(--scrollbar-width))* .4166)}.material-grid__col--medium--6{max-width:60rem;max-width:calc((120rem - var(--scrollbar-width))* .5);width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 6}.material-grid__col--medium--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid--fluid-rows>.material-grid__height--medium--6{grid-row:span 6;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5);max-height:60rem;max-height:calc((120rem - var(--scrollbar-width))* .5)}.material-grid__col--medium--7{max-width:69.996rem;max-width:calc((120rem - var(--scrollbar-width))* .5833);width:58.33vw;width:calc((100vw - var(--scrollbar-width))* .5833);grid-column:span 7}.material-grid__col--medium--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid--fluid-rows>.material-grid__height--medium--7{grid-row:span 7;height:58.33vw;height:calc((100vw - var(--scrollbar-width))* .5833);min-height:58.33vw;min-height:calc((100vw - var(--scrollbar-width))* .5833);max-height:69.996rem;max-height:calc((120rem - var(--scrollbar-width))* .5833)}.material-grid__col--medium--8{max-width:79.992rem;max-width:calc((120rem - var(--scrollbar-width))* .6666);width:66.66vw;width:calc((100vw - var(--scrollbar-width))* .6666);grid-column:span 8}.material-grid__col--medium--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid--fluid-rows>.material-grid__height--medium--8{grid-row:span 8;height:66.66vw;height:calc((100vw - var(--scrollbar-width))* .6666);min-height:66.66vw;min-height:calc((100vw - var(--scrollbar-width))* .6666);max-height:79.992rem;max-height:calc((120rem - var(--scrollbar-width))* .6666)}.material-grid__col--medium--9{max-width:90rem;max-width:calc((120rem - var(--scrollbar-width))* .75);width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 9}.material-grid__col--medium--9.material-grid>:not([class*=material-grid__col]){grid-column:span 9}.material-grid--fluid-rows>.material-grid__height--medium--9{grid-row:span 9;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75);max-height:90rem;max-height:calc((120rem - var(--scrollbar-width))* .75)}.material-grid__col--medium--10{max-width:99.996rem;max-width:calc((120rem - var(--scrollbar-width))* .8333);width:83.33vw;width:calc((100vw - var(--scrollbar-width))* .8333);grid-column:span 10}.material-grid__col--medium--10.material-grid>:not([class*=material-grid__col]){grid-column:span 10}.material-grid--fluid-rows>.material-grid__height--medium--10{grid-row:span 10;height:83.33vw;height:calc((100vw - var(--scrollbar-width))* .8333);min-height:83.33vw;min-height:calc((100vw - var(--scrollbar-width))* .8333);max-height:99.996rem;max-height:calc((120rem - var(--scrollbar-width))* .8333)}.material-grid__col--medium--11{max-width:109.992rem;max-width:calc((120rem - var(--scrollbar-width))* .9166);width:91.66vw;width:calc((100vw - var(--scrollbar-width))* .9166);grid-column:span 11}.material-grid__col--medium--11.material-grid>:not([class*=material-grid__col]){grid-column:span 11}.material-grid--fluid-rows>.material-grid__height--medium--11{grid-row:span 11;height:91.66vw;height:calc((100vw - var(--scrollbar-width))* .9166);min-height:91.66vw;min-height:calc((100vw - var(--scrollbar-width))* .9166);max-height:109.992rem;max-height:calc((120rem - var(--scrollbar-width))* .9166)}.material-grid__col--medium--12{max-width:120rem;max-width:calc((120rem - var(--scrollbar-width))* 1);width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 12}.material-grid__col--medium--12.material-grid>:not([class*=material-grid__col]){grid-column:span 12}.material-grid--fluid-rows>.material-grid__height--medium--12{grid-row:span 12;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1);max-height:120rem;max-height:calc((120rem - var(--scrollbar-width))* 1)}}@media screen and (min-width:120rem){.material-grid__col--medium--0--only,.material-grid__col--small--0--only,.material-grid__col--xsmall--0--only,[class*=material-grid__col--xlarge--]{display:block}.material-grid__col--xlarge--0,.material-grid__col--xlarge--0--only{display:none}.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,9.996rem);grid-template-columns:repeat(auto-fill,calc((120rem - var(--scrollbar-width))* .0833))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,10rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:9.996rem;grid-auto-rows:calc((120rem - var(--scrollbar-width))* .0833)}[class*=material-grid__col--]{min-width:0}}@supports (display:grid){.material-grid>*,.material-grid>[class*=material-grid__col--]{min-width:initial;max-width:initial;width:initial}.material-grid>.material-grid,.material-grid>[class*=material-grid__col--].material-grid{display:grid}.material-grid>[class*=material-grid__height--]{height:unset;max-height:unset;min-height:initial}}.material-grid>script{display:none}
\ No newline at end of file
diff --git a/examples/material/css-gridish/css/material-grid-minimal.css b/examples/material/css-gridish/css/material-grid-minimal.css
new file mode 100644
index 0000000..60d19fe
--- /dev/null
+++ b/examples/material/css-gridish/css/material-grid-minimal.css
@@ -0,0 +1,189 @@
+html {
+  font-size: 16px; }
+
+body {
+  margin: 0; }
+
+.material-container {
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 120rem;
+  overflow-x: hidden;
+  padding-right: var(--scrollbar-width);
+  width: 100vw; }
+
+.material-container--left {
+  margin-left: 0; }
+
+.material-container--right {
+  margin-right: 0; }
+
+.material-grid {
+  align-items: flex-start;
+  box-sizing: border-box;
+  display: grid;
+  flex-wrap: wrap;
+  position: relative; }
+  .material-grid > * {
+    box-sizing: border-box; }
+    .material-grid > * :last-child,
+    .material-grid > * :last-child > :last-child,
+    .material-grid > * :last-child > :last-child > :last-child {
+      margin-bottom: 0; }
+
+[class*="material-padding"] {
+  box-sizing: border-box; }
+
+@supports (display: grid) {
+  .material-grid > * {
+    height: 100%; } }
+
+:root {
+  --scrollbar-width: 0px;
+  --material-height-1: 0.5rem;
+  --material-height-2: 1rem;
+  --material-height-3: 1.5rem;
+  --material-height-4: 2rem;
+  --material-height-5: 2.5rem;
+  --material-height-6: 3rem;
+  --material-height-7: 3.5rem;
+  --material-height-8: 4rem;
+  --material-height-9: 4.5rem;
+  --material-height-10: 5rem;
+  --material-height-11: 5.5rem;
+  --material-height-12: 6rem;
+  --material-height-13: 6.5rem;
+  --material-height-14: 7rem;
+  --material-height-15: 7.5rem;
+  --material-height-16: 8rem;
+  --material-height-17: 8.5rem;
+  --material-height-18: 9rem;
+  --material-height-19: 9.5rem;
+  --material-height-20: 10rem;
+  --material-height-21: 10.5rem;
+  --material-height-22: 11rem;
+  --material-height-23: 11.5rem;
+  --material-height-24: 12rem;
+  --material-height-25: 12.5rem;
+  --material-height-26: 13rem;
+  --material-height-27: 13.5rem;
+  --material-height-28: 14rem;
+  --material-height-29: 14.5rem; }
+
+.material-padding {
+  padding: 0.5rem; }
+
+.material-padding--bottom {
+  padding-bottom: 0.5rem; }
+
+.material-padding--left {
+  padding-left: 0.5rem; }
+
+.material-padding--right {
+  padding-right: 0.5rem; }
+
+.material-padding--top {
+  padding-top: 0.5rem; }
+
+.material-padding--horizontal {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem; }
+
+.material-padding--vertical {
+  padding-bottom: 0.5rem;
+  padding-top: 0.5rem; }
+
+.material-grid {
+  grid-auto-rows: minmax(0.5rem, min-content);
+  grid-template-columns: repeat(auto-fill, 25vw);
+  grid-template-columns: repeat(auto-fill, calc((100vw - var(--scrollbar-width))* 0.25)); }
+  .material-grid.material-grid--fixed-columns {
+    grid-template-columns: repeat(auto-fill, 5.625rem); }
+  .material-grid.material-grid--fluid-rows {
+    grid-auto-rows: 25vw;
+    grid-auto-rows: calc((100vw - var(--scrollbar-width))* 0.25); }
+  .material-grid > * {
+    grid-column: span 4; }
+
+@media screen and (min-width: 37.5rem) {
+  .material-padding {
+    padding: 0.5rem; }
+  .material-padding--bottom {
+    padding-bottom: 0.5rem; }
+  .material-padding--left {
+    padding-left: 0.5rem; }
+  .material-padding--right {
+    padding-right: 0.5rem; }
+  .material-padding--top {
+    padding-top: 0.5rem; }
+  .material-padding--horizontal {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem; }
+  .material-padding--vertical {
+    padding-bottom: 0.5rem;
+    padding-top: 0.5rem; }
+  .material-grid {
+    grid-template-columns: repeat(auto-fill, 12.5vw);
+    grid-template-columns: repeat(auto-fill, calc((100vw - var(--scrollbar-width))* 0.125)); }
+    .material-grid.material-grid--fixed-columns {
+      grid-template-columns: repeat(auto-fill, 4.6875rem); }
+    .material-grid.material-grid--fluid-rows {
+      grid-auto-rows: 12.5vw;
+      grid-auto-rows: calc((100vw - var(--scrollbar-width))* 0.125); }
+    .material-grid > * {
+      grid-column: span 8; } }
+
+@media screen and (min-width: 64rem) {
+  .material-padding {
+    padding: 1rem; }
+  .material-padding--bottom {
+    padding-bottom: 1rem; }
+  .material-padding--left {
+    padding-left: 1rem; }
+  .material-padding--right {
+    padding-right: 1rem; }
+  .material-padding--top {
+    padding-top: 1rem; }
+  .material-padding--horizontal {
+    padding-left: 1rem;
+    padding-right: 1rem; }
+  .material-padding--vertical {
+    padding-bottom: 1rem;
+    padding-top: 1rem; }
+  .material-grid {
+    grid-template-columns: repeat(auto-fill, 8.33vw);
+    grid-template-columns: repeat(auto-fill, calc((100vw - var(--scrollbar-width))* 0.0833)); }
+    .material-grid.material-grid--fixed-columns {
+      grid-template-columns: repeat(auto-fill, 5.33333rem); }
+    .material-grid.material-grid--fluid-rows {
+      grid-auto-rows: 8.33vw;
+      grid-auto-rows: calc((100vw - var(--scrollbar-width))* 0.0833); }
+    .material-grid > * {
+      grid-column: span 12; } }
+
+@media screen and (min-width: 120rem) {
+  .material-padding {
+    padding: 1rem; }
+  .material-padding--bottom {
+    padding-bottom: 1rem; }
+  .material-padding--left {
+    padding-left: 1rem; }
+  .material-padding--right {
+    padding-right: 1rem; }
+  .material-padding--top {
+    padding-top: 1rem; }
+  .material-padding--horizontal {
+    padding-left: 1rem;
+    padding-right: 1rem; }
+  .material-padding--vertical {
+    padding-bottom: 1rem;
+    padding-top: 1rem; }
+  .material-grid {
+    grid-template-columns: repeat(auto-fill, 9.996rem);
+    grid-template-columns: repeat(auto-fill, calc((120rem - var(--scrollbar-width))* 0.0833)); }
+    .material-grid.material-grid--fixed-columns {
+      grid-template-columns: repeat(auto-fill, 10rem); }
+    .material-grid.material-grid--fluid-rows {
+      grid-auto-rows: 9.996rem;
+      grid-auto-rows: calc((120rem - var(--scrollbar-width))* 0.0833); } }
diff --git a/examples/material/css-gridish/css/material-grid-minimal.min.css b/examples/material/css-gridish/css/material-grid-minimal.min.css
new file mode 100644
index 0000000..61b36ef
--- /dev/null
+++ b/examples/material/css-gridish/css/material-grid-minimal.min.css
@@ -0,0 +1 @@
+html{font-size:16px}body{margin:0}.material-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:120rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.material-container--left{margin-left:0}.material-container--right{margin-right:0}.material-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,25vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .25))}.material-grid>*{box-sizing:border-box;grid-column:span 4}.material-grid>* :last-child,.material-grid>* :last-child>:last-child,.material-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=material-padding]{box-sizing:border-box}@supports (display:grid){.material-grid>*{height:100%}}:root{--scrollbar-width:0px;--material-height-1:0.5rem;--material-height-2:1rem;--material-height-3:1.5rem;--material-height-4:2rem;--material-height-5:2.5rem;--material-height-6:3rem;--material-height-7:3.5rem;--material-height-8:4rem;--material-height-9:4.5rem;--material-height-10:5rem;--material-height-11:5.5rem;--material-height-12:6rem;--material-height-13:6.5rem;--material-height-14:7rem;--material-height-15:7.5rem;--material-height-16:8rem;--material-height-17:8.5rem;--material-height-18:9rem;--material-height-19:9.5rem;--material-height-20:10rem;--material-height-21:10.5rem;--material-height-22:11rem;--material-height-23:11.5rem;--material-height-24:12rem;--material-height-25:12.5rem;--material-height-26:13rem;--material-height-27:13.5rem;--material-height-28:14rem;--material-height-29:14.5rem}.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.625rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:25vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .25)}@media screen and (min-width:37.5rem){.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid{grid-template-columns:repeat(auto-fill,12.5vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .125))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,4.6875rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:12.5vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .125)}.material-grid>*{grid-column:span 8}}@media screen and (min-width:64rem){.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,8.33vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .0833))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.33333rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:8.33vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .0833)}.material-grid>*{grid-column:span 12}}@media screen and (min-width:120rem){.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,9.996rem);grid-template-columns:repeat(auto-fill,calc((120rem - var(--scrollbar-width))* .0833))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,10rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:9.996rem;grid-auto-rows:calc((120rem - var(--scrollbar-width))* .0833)}}
\ No newline at end of file
diff --git a/examples/material/css-gridish/css/material-grid.css b/examples/material/css-gridish/css/material-grid.css
index 9f63755..9016e09 100755
--- a/examples/material/css-gridish/css/material-grid.css
+++ b/examples/material/css-gridish/css/material-grid.css
@@ -10,6 +10,7 @@ body {
   margin-right: auto;
   max-width: 120rem;
   overflow-x: hidden;
+  padding-right: var(--scrollbar-width);
   width: 100vw; }
 
 .material-container--left {
@@ -39,6 +40,7 @@ body {
     height: 100%; } }
 
 :root {
+  --scrollbar-width: 0px;
   --material-height-1: 0.5rem;
   --material-height-2: 1rem;
   --material-height-3: 1.5rem;
@@ -192,11 +194,13 @@ body {
 
 .material-grid {
   grid-auto-rows: minmax(0.5rem, min-content);
-  grid-template-columns: repeat(auto-fill, 25vw); }
+  grid-template-columns: repeat(auto-fill, 25vw);
+  grid-template-columns: repeat(auto-fill, calc((100vw - var(--scrollbar-width))* 0.25)); }
   .material-grid.material-grid--fixed-columns {
     grid-template-columns: repeat(auto-fill, 5.625rem); }
   .material-grid.material-grid--fluid-rows {
-    grid-auto-rows: 25vw; }
+    grid-auto-rows: 25vw;
+    grid-auto-rows: calc((100vw - var(--scrollbar-width))* 0.25); }
   .material-grid > * {
     grid-column: span 4; }
 
@@ -322,11 +326,13 @@ body {
     padding-bottom: 0.5rem;
     padding-top: 0.5rem; }
   .material-grid {
-    grid-template-columns: repeat(auto-fill, 12.5vw); }
+    grid-template-columns: repeat(auto-fill, 12.5vw);
+    grid-template-columns: repeat(auto-fill, calc((100vw - var(--scrollbar-width))* 0.125)); }
     .material-grid.material-grid--fixed-columns {
       grid-template-columns: repeat(auto-fill, 4.6875rem); }
     .material-grid.material-grid--fluid-rows {
-      grid-auto-rows: 12.5vw; }
+      grid-auto-rows: 12.5vw;
+      grid-auto-rows: calc((100vw - var(--scrollbar-width))* 0.125); }
     .material-grid > * {
       grid-column: span 8; }
   .material-grid__col--xsmall--1 {
@@ -502,11 +508,13 @@ body {
     padding-bottom: 1rem;
     padding-top: 1rem; }
   .material-grid {
-    grid-template-columns: repeat(auto-fill, 8.33vw); }
+    grid-template-columns: repeat(auto-fill, 8.33vw);
+    grid-template-columns: repeat(auto-fill, calc((100vw - var(--scrollbar-width))* 0.0833)); }
     .material-grid.material-grid--fixed-columns {
       grid-template-columns: repeat(auto-fill, 5.33333rem); }
     .material-grid.material-grid--fluid-rows {
-      grid-auto-rows: 8.33vw; }
+      grid-auto-rows: 8.33vw;
+      grid-auto-rows: calc((100vw - var(--scrollbar-width))* 0.0833); }
     .material-grid > * {
       grid-column: span 12; }
   .material-grid__col--xsmall--1 {
@@ -707,8 +715,10 @@ body {
     padding-bottom: 1rem;
     padding-top: 1rem; }
   .material-grid {
-    grid-template-columns: repeat(auto-fill, 9.996rem); }
+    grid-template-columns: repeat(auto-fill, 9.996rem);
+    grid-template-columns: repeat(auto-fill, calc((120rem - var(--scrollbar-width))* 0.0833)); }
     .material-grid.material-grid--fixed-columns {
       grid-template-columns: repeat(auto-fill, 10rem); }
     .material-grid.material-grid--fluid-rows {
-      grid-auto-rows: 9.996rem; } }
+      grid-auto-rows: 9.996rem;
+      grid-auto-rows: calc((120rem - var(--scrollbar-width))* 0.0833); } }
diff --git a/examples/material/css-gridish/css/material-grid.min.css b/examples/material/css-gridish/css/material-grid.min.css
index d731edb..a7bc883 100755
--- a/examples/material/css-gridish/css/material-grid.min.css
+++ b/examples/material/css-gridish/css/material-grid.min.css
@@ -1 +1 @@
-html{font-size:16px}body{margin:0}.material-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:120rem;overflow-x:hidden;width:100vw}.material-container--left{margin-left:0}.material-container--right{margin-right:0}.material-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,25vw)}.material-grid>*{box-sizing:border-box;grid-column:span 4}.material-grid>* :last-child,.material-grid>* :last-child>:last-child,.material-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=material-padding]{box-sizing:border-box}@supports (display:grid){.material-grid>*{height:100%}}:root{--material-height-1:0.5rem;--material-height-2:1rem;--material-height-3:1.5rem;--material-height-4:2rem;--material-height-5:2.5rem;--material-height-6:3rem;--material-height-7:3.5rem;--material-height-8:4rem;--material-height-9:4.5rem;--material-height-10:5rem;--material-height-11:5.5rem;--material-height-12:6rem;--material-height-13:6.5rem;--material-height-14:7rem;--material-height-15:7.5rem;--material-height-16:8rem;--material-height-17:8.5rem;--material-height-18:9rem;--material-height-19:9.5rem;--material-height-20:10rem;--material-height-21:10.5rem;--material-height-22:11rem;--material-height-23:11.5rem;--material-height-24:12rem;--material-height-25:12.5rem;--material-height-26:13rem;--material-height-27:13.5rem;--material-height-28:14rem;--material-height-29:14.5rem}.material-grid__height--xsmall--0{height:0;min-height:0}.material-grid__height--xsmall--1{grid-row:span 1}.material-grid__height--xsmall--2{grid-row:span 2}.material-grid__height--xsmall--3{grid-row:span 3}.material-grid__height--xsmall--4{grid-row:span 4}.material-grid__height--xsmall--5{grid-row:span 5}.material-grid__height--xsmall--6{grid-row:span 6}.material-grid__height--xsmall--7{grid-row:span 7}.material-grid__height--xsmall--8{grid-row:span 8}.material-grid__height--xsmall--9{grid-row:span 9}.material-grid__height--xsmall--10{grid-row:span 10}.material-grid__height--xsmall--11{grid-row:span 11}.material-grid__height--xsmall--12{grid-row:span 12}.material-grid__height--xsmall--13{grid-row:span 13}.material-grid__height--xsmall--14{grid-row:span 14}.material-grid__height--xsmall--15{grid-row:span 15}.material-grid__height--xsmall--16{grid-row:span 16}.material-grid__height--xsmall--17{grid-row:span 17}.material-grid__height--xsmall--18{grid-row:span 18}.material-grid__height--xsmall--19{grid-row:span 19}.material-grid__height--xsmall--20{grid-row:span 20}.material-grid__height--xsmall--21{grid-row:span 21}.material-grid__height--xsmall--22{grid-row:span 22}.material-grid__height--xsmall--23{grid-row:span 23}.material-grid__height--xsmall--24{grid-row:span 24}.material-grid__height--xsmall--25{grid-row:span 25}.material-grid__height--xsmall--26{grid-row:span 26}.material-grid__height--xsmall--27{grid-row:span 27}.material-grid__height--xsmall--28{grid-row:span 28}.material-grid__height--xsmall--29{grid-row:span 29}[class*=material-grid__col--xsmall--]{display:block}.material-grid__col--xsmall--0,.material-grid__col--xsmall--0--only{display:none}.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.625rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:25vw}.material-grid__col--xsmall--1,.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1}.material-grid__col--xsmall--2,.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2}.material-grid__col--xsmall--3,.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3}.material-grid__col--xsmall--4,.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4}@media screen and (min-width:37.5rem){.material-grid__height--small--0{height:0;min-height:0}.material-grid__height--small--1{grid-row:span 1}.material-grid__height--small--2{grid-row:span 2}.material-grid__height--small--3{grid-row:span 3}.material-grid__height--small--4{grid-row:span 4}.material-grid__height--small--5{grid-row:span 5}.material-grid__height--small--6{grid-row:span 6}.material-grid__height--small--7{grid-row:span 7}.material-grid__height--small--8{grid-row:span 8}.material-grid__height--small--9{grid-row:span 9}.material-grid__height--small--10{grid-row:span 10}.material-grid__height--small--11{grid-row:span 11}.material-grid__height--small--12{grid-row:span 12}.material-grid__height--small--13{grid-row:span 13}.material-grid__height--small--14{grid-row:span 14}.material-grid__height--small--15{grid-row:span 15}.material-grid__height--small--16{grid-row:span 16}.material-grid__height--small--17{grid-row:span 17}.material-grid__height--small--18{grid-row:span 18}.material-grid__height--small--19{grid-row:span 19}.material-grid__height--small--20{grid-row:span 20}.material-grid__height--small--21{grid-row:span 21}.material-grid__height--small--22{grid-row:span 22}.material-grid__height--small--23{grid-row:span 23}.material-grid__height--small--24{grid-row:span 24}.material-grid__height--small--25{grid-row:span 25}.material-grid__height--small--26{grid-row:span 26}.material-grid__height--small--27{grid-row:span 27}.material-grid__height--small--28{grid-row:span 28}.material-grid__height--small--29{grid-row:span 29}.material-grid__col--xsmall--0--only,[class*=material-grid__col--small--]{display:block}.material-grid__col--small--0,.material-grid__col--small--0--only{display:none}.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid{grid-template-columns:repeat(auto-fill,12.5vw)}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,4.6875rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:12.5vw}.material-grid>*{grid-column:span 8}.material-grid__col--xsmall--1{grid-column:span 2}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1}.material-grid__col--xsmall--2{grid-column:span 4}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2}.material-grid__col--xsmall--3{grid-column:span 6}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3}.material-grid__col--xsmall--4{grid-column:span 8}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4}.material-grid__col--small--1,.material-grid__col--small--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--small--1{grid-row:span 1}.material-grid__col--small--2,.material-grid__col--small--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--small--2{grid-row:span 2}.material-grid__col--small--3,.material-grid__col--small--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--small--3{grid-row:span 3}.material-grid__col--small--4,.material-grid__col--small--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--small--4{grid-row:span 4}.material-grid__col--small--5,.material-grid__col--small--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid--fluid-rows>.material-grid__height--small--5{grid-row:span 5}.material-grid__col--small--6,.material-grid__col--small--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid--fluid-rows>.material-grid__height--small--6{grid-row:span 6}.material-grid__col--small--7,.material-grid__col--small--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid--fluid-rows>.material-grid__height--small--7{grid-row:span 7}.material-grid__col--small--8,.material-grid__col--small--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid--fluid-rows>.material-grid__height--small--8{grid-row:span 8}}@media screen and (min-width:64rem){.material-grid__height--medium--0{height:0;min-height:0}.material-grid__height--medium--1{grid-row:span 1}.material-grid__height--medium--2{grid-row:span 2}.material-grid__height--medium--3{grid-row:span 3}.material-grid__height--medium--4{grid-row:span 4}.material-grid__height--medium--5{grid-row:span 5}.material-grid__height--medium--6{grid-row:span 6}.material-grid__height--medium--7{grid-row:span 7}.material-grid__height--medium--8{grid-row:span 8}.material-grid__height--medium--9{grid-row:span 9}.material-grid__height--medium--10{grid-row:span 10}.material-grid__height--medium--11{grid-row:span 11}.material-grid__height--medium--12{grid-row:span 12}.material-grid__height--medium--13{grid-row:span 13}.material-grid__height--medium--14{grid-row:span 14}.material-grid__height--medium--15{grid-row:span 15}.material-grid__height--medium--16{grid-row:span 16}.material-grid__height--medium--17{grid-row:span 17}.material-grid__height--medium--18{grid-row:span 18}.material-grid__height--medium--19{grid-row:span 19}.material-grid__height--medium--20{grid-row:span 20}.material-grid__height--medium--21{grid-row:span 21}.material-grid__height--medium--22{grid-row:span 22}.material-grid__height--medium--23{grid-row:span 23}.material-grid__height--medium--24{grid-row:span 24}.material-grid__height--medium--25{grid-row:span 25}.material-grid__height--medium--26{grid-row:span 26}.material-grid__height--medium--27{grid-row:span 27}.material-grid__height--medium--28{grid-row:span 28}.material-grid__height--medium--29{grid-row:span 29}.material-grid__col--small--0--only,.material-grid__col--xsmall--0--only,[class*=material-grid__col--medium--]{display:block}.material-grid__col--medium--0,.material-grid__col--medium--0--only{display:none}.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,8.33vw)}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.33333rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:8.33vw}.material-grid>*{grid-column:span 12}.material-grid__col--xsmall--1{grid-column:span 3}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1}.material-grid__col--xsmall--2{grid-column:span 6}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2}.material-grid__col--xsmall--3{grid-column:span 9}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3}.material-grid__col--xsmall--4{grid-column:span 12}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4}.material-grid__col--small--1{grid-column:span 1.5}.material-grid__col--small--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--small--1{grid-row:span 1}.material-grid__col--small--2{grid-column:span 3}.material-grid__col--small--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--small--2{grid-row:span 2}.material-grid__col--small--3{grid-column:span 4.5}.material-grid__col--small--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--small--3{grid-row:span 3}.material-grid__col--small--4{grid-column:span 6}.material-grid__col--small--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--small--4{grid-row:span 4}.material-grid__col--small--5{grid-column:span 7.5}.material-grid__col--small--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid--fluid-rows>.material-grid__height--small--5{grid-row:span 5}.material-grid__col--small--6{grid-column:span 9}.material-grid__col--small--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid--fluid-rows>.material-grid__height--small--6{grid-row:span 6}.material-grid__col--small--7{grid-column:span 10.5}.material-grid__col--small--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid--fluid-rows>.material-grid__height--small--7{grid-row:span 7}.material-grid__col--small--8{grid-column:span 12}.material-grid__col--small--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid--fluid-rows>.material-grid__height--small--8{grid-row:span 8}.material-grid__col--medium--1,.material-grid__col--medium--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--medium--1{grid-row:span 1}.material-grid__col--medium--2,.material-grid__col--medium--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--medium--2{grid-row:span 2}.material-grid__col--medium--3,.material-grid__col--medium--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--medium--3{grid-row:span 3}.material-grid__col--medium--4,.material-grid__col--medium--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--medium--4{grid-row:span 4}.material-grid__col--medium--5,.material-grid__col--medium--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid--fluid-rows>.material-grid__height--medium--5{grid-row:span 5}.material-grid__col--medium--6,.material-grid__col--medium--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid--fluid-rows>.material-grid__height--medium--6{grid-row:span 6}.material-grid__col--medium--7,.material-grid__col--medium--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid--fluid-rows>.material-grid__height--medium--7{grid-row:span 7}.material-grid__col--medium--8,.material-grid__col--medium--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid--fluid-rows>.material-grid__height--medium--8{grid-row:span 8}.material-grid__col--medium--9,.material-grid__col--medium--9.material-grid>:not([class*=material-grid__col]){grid-column:span 9}.material-grid--fluid-rows>.material-grid__height--medium--9{grid-row:span 9}.material-grid__col--medium--10,.material-grid__col--medium--10.material-grid>:not([class*=material-grid__col]){grid-column:span 10}.material-grid--fluid-rows>.material-grid__height--medium--10{grid-row:span 10}.material-grid__col--medium--11,.material-grid__col--medium--11.material-grid>:not([class*=material-grid__col]){grid-column:span 11}.material-grid--fluid-rows>.material-grid__height--medium--11{grid-row:span 11}.material-grid__col--medium--12,.material-grid__col--medium--12.material-grid>:not([class*=material-grid__col]){grid-column:span 12}.material-grid--fluid-rows>.material-grid__height--medium--12{grid-row:span 12}}@media screen and (min-width:120rem){.material-grid__col--medium--0--only,.material-grid__col--small--0--only,.material-grid__col--xsmall--0--only,[class*=material-grid__col--xlarge--]{display:block}.material-grid__col--xlarge--0,.material-grid__col--xlarge--0--only{display:none}.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,9.996rem)}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,10rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:9.996rem}}
\ No newline at end of file
+html{font-size:16px}body{margin:0}.material-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:120rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.material-container--left{margin-left:0}.material-container--right{margin-right:0}.material-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,25vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .25))}.material-grid>*{box-sizing:border-box;grid-column:span 4}.material-grid>* :last-child,.material-grid>* :last-child>:last-child,.material-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=material-padding]{box-sizing:border-box}@supports (display:grid){.material-grid>*{height:100%}}:root{--scrollbar-width:0px;--material-height-1:0.5rem;--material-height-2:1rem;--material-height-3:1.5rem;--material-height-4:2rem;--material-height-5:2.5rem;--material-height-6:3rem;--material-height-7:3.5rem;--material-height-8:4rem;--material-height-9:4.5rem;--material-height-10:5rem;--material-height-11:5.5rem;--material-height-12:6rem;--material-height-13:6.5rem;--material-height-14:7rem;--material-height-15:7.5rem;--material-height-16:8rem;--material-height-17:8.5rem;--material-height-18:9rem;--material-height-19:9.5rem;--material-height-20:10rem;--material-height-21:10.5rem;--material-height-22:11rem;--material-height-23:11.5rem;--material-height-24:12rem;--material-height-25:12.5rem;--material-height-26:13rem;--material-height-27:13.5rem;--material-height-28:14rem;--material-height-29:14.5rem}.material-grid__height--xsmall--0{height:0;min-height:0}.material-grid__height--xsmall--1{grid-row:span 1}.material-grid__height--xsmall--2{grid-row:span 2}.material-grid__height--xsmall--3{grid-row:span 3}.material-grid__height--xsmall--4{grid-row:span 4}.material-grid__height--xsmall--5{grid-row:span 5}.material-grid__height--xsmall--6{grid-row:span 6}.material-grid__height--xsmall--7{grid-row:span 7}.material-grid__height--xsmall--8{grid-row:span 8}.material-grid__height--xsmall--9{grid-row:span 9}.material-grid__height--xsmall--10{grid-row:span 10}.material-grid__height--xsmall--11{grid-row:span 11}.material-grid__height--xsmall--12{grid-row:span 12}.material-grid__height--xsmall--13{grid-row:span 13}.material-grid__height--xsmall--14{grid-row:span 14}.material-grid__height--xsmall--15{grid-row:span 15}.material-grid__height--xsmall--16{grid-row:span 16}.material-grid__height--xsmall--17{grid-row:span 17}.material-grid__height--xsmall--18{grid-row:span 18}.material-grid__height--xsmall--19{grid-row:span 19}.material-grid__height--xsmall--20{grid-row:span 20}.material-grid__height--xsmall--21{grid-row:span 21}.material-grid__height--xsmall--22{grid-row:span 22}.material-grid__height--xsmall--23{grid-row:span 23}.material-grid__height--xsmall--24{grid-row:span 24}.material-grid__height--xsmall--25{grid-row:span 25}.material-grid__height--xsmall--26{grid-row:span 26}.material-grid__height--xsmall--27{grid-row:span 27}.material-grid__height--xsmall--28{grid-row:span 28}.material-grid__height--xsmall--29{grid-row:span 29}[class*=material-grid__col--xsmall--]{display:block}.material-grid__col--xsmall--0,.material-grid__col--xsmall--0--only{display:none}.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.625rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:25vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .25)}.material-grid__col--xsmall--1,.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1}.material-grid__col--xsmall--2,.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2}.material-grid__col--xsmall--3,.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3}.material-grid__col--xsmall--4,.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4}@media screen and (min-width:37.5rem){.material-grid__height--small--0{height:0;min-height:0}.material-grid__height--small--1{grid-row:span 1}.material-grid__height--small--2{grid-row:span 2}.material-grid__height--small--3{grid-row:span 3}.material-grid__height--small--4{grid-row:span 4}.material-grid__height--small--5{grid-row:span 5}.material-grid__height--small--6{grid-row:span 6}.material-grid__height--small--7{grid-row:span 7}.material-grid__height--small--8{grid-row:span 8}.material-grid__height--small--9{grid-row:span 9}.material-grid__height--small--10{grid-row:span 10}.material-grid__height--small--11{grid-row:span 11}.material-grid__height--small--12{grid-row:span 12}.material-grid__height--small--13{grid-row:span 13}.material-grid__height--small--14{grid-row:span 14}.material-grid__height--small--15{grid-row:span 15}.material-grid__height--small--16{grid-row:span 16}.material-grid__height--small--17{grid-row:span 17}.material-grid__height--small--18{grid-row:span 18}.material-grid__height--small--19{grid-row:span 19}.material-grid__height--small--20{grid-row:span 20}.material-grid__height--small--21{grid-row:span 21}.material-grid__height--small--22{grid-row:span 22}.material-grid__height--small--23{grid-row:span 23}.material-grid__height--small--24{grid-row:span 24}.material-grid__height--small--25{grid-row:span 25}.material-grid__height--small--26{grid-row:span 26}.material-grid__height--small--27{grid-row:span 27}.material-grid__height--small--28{grid-row:span 28}.material-grid__height--small--29{grid-row:span 29}.material-grid__col--xsmall--0--only,[class*=material-grid__col--small--]{display:block}.material-grid__col--small--0,.material-grid__col--small--0--only{display:none}.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid{grid-template-columns:repeat(auto-fill,12.5vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .125))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,4.6875rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:12.5vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .125)}.material-grid>*{grid-column:span 8}.material-grid__col--xsmall--1{grid-column:span 2}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1}.material-grid__col--xsmall--2{grid-column:span 4}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2}.material-grid__col--xsmall--3{grid-column:span 6}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3}.material-grid__col--xsmall--4{grid-column:span 8}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4}.material-grid__col--small--1,.material-grid__col--small--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--small--1{grid-row:span 1}.material-grid__col--small--2,.material-grid__col--small--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--small--2{grid-row:span 2}.material-grid__col--small--3,.material-grid__col--small--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--small--3{grid-row:span 3}.material-grid__col--small--4,.material-grid__col--small--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--small--4{grid-row:span 4}.material-grid__col--small--5,.material-grid__col--small--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid--fluid-rows>.material-grid__height--small--5{grid-row:span 5}.material-grid__col--small--6,.material-grid__col--small--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid--fluid-rows>.material-grid__height--small--6{grid-row:span 6}.material-grid__col--small--7,.material-grid__col--small--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid--fluid-rows>.material-grid__height--small--7{grid-row:span 7}.material-grid__col--small--8,.material-grid__col--small--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid--fluid-rows>.material-grid__height--small--8{grid-row:span 8}}@media screen and (min-width:64rem){.material-grid__height--medium--0{height:0;min-height:0}.material-grid__height--medium--1{grid-row:span 1}.material-grid__height--medium--2{grid-row:span 2}.material-grid__height--medium--3{grid-row:span 3}.material-grid__height--medium--4{grid-row:span 4}.material-grid__height--medium--5{grid-row:span 5}.material-grid__height--medium--6{grid-row:span 6}.material-grid__height--medium--7{grid-row:span 7}.material-grid__height--medium--8{grid-row:span 8}.material-grid__height--medium--9{grid-row:span 9}.material-grid__height--medium--10{grid-row:span 10}.material-grid__height--medium--11{grid-row:span 11}.material-grid__height--medium--12{grid-row:span 12}.material-grid__height--medium--13{grid-row:span 13}.material-grid__height--medium--14{grid-row:span 14}.material-grid__height--medium--15{grid-row:span 15}.material-grid__height--medium--16{grid-row:span 16}.material-grid__height--medium--17{grid-row:span 17}.material-grid__height--medium--18{grid-row:span 18}.material-grid__height--medium--19{grid-row:span 19}.material-grid__height--medium--20{grid-row:span 20}.material-grid__height--medium--21{grid-row:span 21}.material-grid__height--medium--22{grid-row:span 22}.material-grid__height--medium--23{grid-row:span 23}.material-grid__height--medium--24{grid-row:span 24}.material-grid__height--medium--25{grid-row:span 25}.material-grid__height--medium--26{grid-row:span 26}.material-grid__height--medium--27{grid-row:span 27}.material-grid__height--medium--28{grid-row:span 28}.material-grid__height--medium--29{grid-row:span 29}.material-grid__col--small--0--only,.material-grid__col--xsmall--0--only,[class*=material-grid__col--medium--]{display:block}.material-grid__col--medium--0,.material-grid__col--medium--0--only{display:none}.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,8.33vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .0833))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.33333rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:8.33vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .0833)}.material-grid>*{grid-column:span 12}.material-grid__col--xsmall--1{grid-column:span 3}.material-grid__col--xsmall--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--xsmall--1{grid-row:span 1}.material-grid__col--xsmall--2{grid-column:span 6}.material-grid__col--xsmall--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--xsmall--2{grid-row:span 2}.material-grid__col--xsmall--3{grid-column:span 9}.material-grid__col--xsmall--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--xsmall--3{grid-row:span 3}.material-grid__col--xsmall--4{grid-column:span 12}.material-grid__col--xsmall--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--xsmall--4{grid-row:span 4}.material-grid__col--small--1{grid-column:span 1.5}.material-grid__col--small--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--small--1{grid-row:span 1}.material-grid__col--small--2{grid-column:span 3}.material-grid__col--small--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--small--2{grid-row:span 2}.material-grid__col--small--3{grid-column:span 4.5}.material-grid__col--small--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--small--3{grid-row:span 3}.material-grid__col--small--4{grid-column:span 6}.material-grid__col--small--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--small--4{grid-row:span 4}.material-grid__col--small--5{grid-column:span 7.5}.material-grid__col--small--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid--fluid-rows>.material-grid__height--small--5{grid-row:span 5}.material-grid__col--small--6{grid-column:span 9}.material-grid__col--small--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid--fluid-rows>.material-grid__height--small--6{grid-row:span 6}.material-grid__col--small--7{grid-column:span 10.5}.material-grid__col--small--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid--fluid-rows>.material-grid__height--small--7{grid-row:span 7}.material-grid__col--small--8{grid-column:span 12}.material-grid__col--small--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid--fluid-rows>.material-grid__height--small--8{grid-row:span 8}.material-grid__col--medium--1,.material-grid__col--medium--1.material-grid>:not([class*=material-grid__col]){grid-column:span 1}.material-grid--fluid-rows>.material-grid__height--medium--1{grid-row:span 1}.material-grid__col--medium--2,.material-grid__col--medium--2.material-grid>:not([class*=material-grid__col]){grid-column:span 2}.material-grid--fluid-rows>.material-grid__height--medium--2{grid-row:span 2}.material-grid__col--medium--3,.material-grid__col--medium--3.material-grid>:not([class*=material-grid__col]){grid-column:span 3}.material-grid--fluid-rows>.material-grid__height--medium--3{grid-row:span 3}.material-grid__col--medium--4,.material-grid__col--medium--4.material-grid>:not([class*=material-grid__col]){grid-column:span 4}.material-grid--fluid-rows>.material-grid__height--medium--4{grid-row:span 4}.material-grid__col--medium--5,.material-grid__col--medium--5.material-grid>:not([class*=material-grid__col]){grid-column:span 5}.material-grid--fluid-rows>.material-grid__height--medium--5{grid-row:span 5}.material-grid__col--medium--6,.material-grid__col--medium--6.material-grid>:not([class*=material-grid__col]){grid-column:span 6}.material-grid--fluid-rows>.material-grid__height--medium--6{grid-row:span 6}.material-grid__col--medium--7,.material-grid__col--medium--7.material-grid>:not([class*=material-grid__col]){grid-column:span 7}.material-grid--fluid-rows>.material-grid__height--medium--7{grid-row:span 7}.material-grid__col--medium--8,.material-grid__col--medium--8.material-grid>:not([class*=material-grid__col]){grid-column:span 8}.material-grid--fluid-rows>.material-grid__height--medium--8{grid-row:span 8}.material-grid__col--medium--9,.material-grid__col--medium--9.material-grid>:not([class*=material-grid__col]){grid-column:span 9}.material-grid--fluid-rows>.material-grid__height--medium--9{grid-row:span 9}.material-grid__col--medium--10,.material-grid__col--medium--10.material-grid>:not([class*=material-grid__col]){grid-column:span 10}.material-grid--fluid-rows>.material-grid__height--medium--10{grid-row:span 10}.material-grid__col--medium--11,.material-grid__col--medium--11.material-grid>:not([class*=material-grid__col]){grid-column:span 11}.material-grid--fluid-rows>.material-grid__height--medium--11{grid-row:span 11}.material-grid__col--medium--12,.material-grid__col--medium--12.material-grid>:not([class*=material-grid__col]){grid-column:span 12}.material-grid--fluid-rows>.material-grid__height--medium--12{grid-row:span 12}}@media screen and (min-width:120rem){.material-grid__col--medium--0--only,.material-grid__col--small--0--only,.material-grid__col--xsmall--0--only,[class*=material-grid__col--xlarge--]{display:block}.material-grid__col--xlarge--0,.material-grid__col--xlarge--0--only{display:none}.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,9.996rem);grid-template-columns:repeat(auto-fill,calc((120rem - var(--scrollbar-width))* .0833))}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,10rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:9.996rem;grid-auto-rows:calc((120rem - var(--scrollbar-width))* .0833)}}
\ No newline at end of file
diff --git a/examples/material/css-gridish/js/material-grid.js b/examples/material/css-gridish/js/material-grid.js
new file mode 100644
index 0000000..6bd20d4
--- /dev/null
+++ b/examples/material/css-gridish/js/material-grid.js
@@ -0,0 +1,20 @@
+(function () {
+  var updateScrollbarWidth = function () {
+    const scrollbarWidth =
+      window.innerWidth - document.documentElement.clientWidth + "px";
+
+    document.documentElement.style.setProperty(
+      "--scrollbar-width",
+      scrollbarWidth
+    );
+  };
+
+  var scrollbarObserver = new MutationObserver(updateScrollbarWidth);
+  scrollbarObserver.observe(document.body, {
+    attributes: true,
+    childList: true,
+    characterData: true
+  });
+
+  updateScrollbarWidth();
+})();
\ No newline at end of file
diff --git a/examples/material/css-gridish/material-grid.sketch b/examples/material/css-gridish/material-grid.sketch
index ae40c0d..14c9031 100644
Binary files a/examples/material/css-gridish/material-grid.sketch and b/examples/material/css-gridish/material-grid.sketch differ
diff --git a/examples/material/css-gridish/scss/_core.scss b/examples/material/css-gridish/scss/_core.scss
index 0df8cfd..7ea5a1d 100755
--- a/examples/material/css-gridish/scss/_core.scss
+++ b/examples/material/css-gridish/scss/_core.scss
@@ -17,6 +17,7 @@ body {
   margin-right: auto;
   max-width: #{map-get($last, breakpoint)}rem;
   overflow-x: hidden;
+  padding-right: var(--scrollbar-width);
   width: 100vw;
 }
 
@@ -77,21 +78,26 @@ body {
   }
 }
 
-@include grid-legacy-wrapper($includeFlexFallback) {
-  :root {
+:root {
+  --scrollbar-width: 0px;
+  @include grid-legacy-wrapper($includeFlexFallback) {
     @include grid-heights-fixed($rows);
   }
 }
 
 @each $name, $breakpoint in $allBreakpoints {
   @include media-query($name) {
-    @if is-same-breakpoint($breakpoint, $last) == false {
+    @if is-same-breakpoint($breakpoint, $last) == false and $minimal == false {
       @include grid-legacy-heights($name);
     }
-    @include grid-legacy-zeros($breakpoint, $name);
+    @if $minimal == false {
+      @include grid-legacy-zeros($breakpoint, $name);
+    }
     @include grid-padding($breakpoint);
     @include grid($breakpoint, $name);
-    @include grid-legacy-columns($breakpoint, $name);
+    @if $minimal == false {
+      @include grid-legacy-columns($breakpoint, $name);
+    }
 
     // Wrap all bleed/break classes and css variables in a CSS Grid support query
     @include grid-legacy-wrapper($includeFlexFallback) {
diff --git a/examples/material/css-gridish/scss/_mixins.scss b/examples/material/css-gridish/scss/_mixins.scss
index cf7bf4b..0851a57 100755
--- a/examples/material/css-gridish/scss/_mixins.scss
+++ b/examples/material/css-gridish/scss/_mixins.scss
@@ -1,13 +1,15 @@
 // Set the width of a grid’s column
 @mixin grid($breakpoint, $breakpointName) {
   @if (map-get($breakpoint, columns) != null) {
-    $columnSize: get-fluid-size($breakpointName, 1);
+    $columnSize: get-fluid-size($breakpointName, 1, false);
+    $columnSizeScrollbar: get-fluid-size($breakpointName, 1);
 
     .#{$prefix}-grid {
       @if is-same-breakpoint($breakpoint, $first) {
         grid-auto-rows: minmax($rowHeight * 1rem, min-content);
       }
       grid-template-columns: repeat(auto-fill, $columnSize);
+      grid-template-columns: repeat(auto-fill, $columnSizeScrollbar);
 
       &.#{$prefix}-grid--fixed-columns {
         grid-template-columns: repeat(
@@ -20,6 +22,7 @@
 
       &.#{$prefix}-grid--fluid-rows {
         grid-auto-rows: $columnSize;
+        grid-auto-rows: $columnSizeScrollbar;
       }
 
       @if is-same-breakpoint($breakpoint, $last) == false {
@@ -55,7 +58,8 @@
           $columnMultiplier: $i *
             map-get($breakpoint, columns) /
             map-get($currentBreakpoint, columns);
-          $columnSize: get-fluid-size($name, $columnMultiplier);
+          $columnSize: get-fluid-size($name, $columnMultiplier, false);
+          $columnSizeScrollbar: get-fluid-size($name, $columnMultiplier);
 
           $isSecondToLast: is-same-breakpoint(
             $breakpoint,
@@ -63,6 +67,11 @@
           );
 
           $maxColumnSize: get-fluid-size(
+            nth(nth($allBreakpoints, length($allBreakpoints)), 1),
+            $columnMultiplier,
+            false
+          );
+          $maxColumnSizeScrollbar: get-fluid-size(
             nth(nth($allBreakpoints, length($allBreakpoints)), 1),
             $columnMultiplier
           );
@@ -72,8 +81,10 @@
               // If second-to-last media query, apply max-width instead of remaking classes in last media query
               @if $isSecondToLast {
                 max-width: $maxColumnSize;
+                max-width: $maxColumnSizeScrollbar;
               }
               width: $columnSize;
+              width: $columnSizeScrollbar;
             }
             grid-column: span #{$columnMultiplier};
 
@@ -89,10 +100,13 @@
             grid-row: span $i;
             @if $includeFlexFallback {
               height: $columnSize;
+              height: $columnSizeScrollbar;
               min-height: $columnSize;
+              min-height: $columnSizeScrollbar;
               // If second-to-last media query, apply max-height instead of remaking classes in last media query
               @if $isSecondToLast {
                 max-height: $maxColumnSize;
+                max-height: $maxColumnSizeScrollbar;
               }
             }
           }
diff --git a/examples/material/css-gridish/scss/_utilities.scss b/examples/material/css-gridish/scss/_utilities.scss
index 1d29635..31d2fd1 100644
--- a/examples/material/css-gridish/scss/_utilities.scss
+++ b/examples/material/css-gridish/scss/_utilities.scss
@@ -18,6 +18,7 @@
 /// Returns a calc() expression that represents a fluid width at a given breakpoint.
 /// @param {String} $breakpointName A valid breakpoint.
 /// @param {Number} $columnSpan The number of columns to span across.
+/// @param {Boolean} $supportsCSSVariable Does the output rule include CSS Variables?
 /// @return {Length} A calc() expression representing fluid width.
 /// @example scss
 /// button {
@@ -31,7 +32,11 @@
 ///     max-width: 25vw;
 ///   }
 /// }
-@function get-fluid-size($breakpointName, $columnSpan) {
+@function get-fluid-size(
+  $breakpointName,
+  $columnSpan,
+  $supportsCSSVariable: true
+) {
   $breakpoint: map-get($breakpointsAndArtboards, $breakpointName);
 
   @if ($breakpoint == null or type-of($breakpoint) != "map") {
@@ -54,16 +59,27 @@
   }
 
   $container: 100vw;
+  @if ($supportsCSSVariable) {
+    $container: "(100vw - var(--scrollbar-width))";
+  }
+
   // Last breakpoint is a max-width and should be a fixed number
   @if is-same-breakpoint($breakpoint, $last) {
     $container: map-get($breakpoint, breakpoint) * 1rem;
+    @if ($supportsCSSVariable) {
+      $container: "(#{$container} - var(--scrollbar-width))";
+    }
   }
 
   $multiplier: round-decimal($columnSpan / $columnTotal, 4, floor);
 
   // For IE, we can't have a 0 in the $fluidWidth calc().
   @if ($margin == 0) {
-    @return $container * $multiplier;
+    @if ($supportsCSSVariable) {
+      @return calc(#{$container}* #{$multiplier});
+    } @else {
+      @return $container * $multiplier;
+    }
   }
 
   @return calc((#{$container} - #{$margin * 2}) * #{$multiplier});
diff --git a/examples/material/css-gridish/scss/_variables.scss b/examples/material/css-gridish/scss/_variables.scss
index 19b5e36..1863d1e 100755
--- a/examples/material/css-gridish/scss/_variables.scss
+++ b/examples/material/css-gridish/scss/_variables.scss
@@ -9,6 +9,7 @@ $breakpoints: add-padding(map-get($grid-values, "breakpoints"));
 $first: nth(nth($breakpoints, 1), 2);
 $last: nth(nth($breakpoints, -1), 2);
 $includeFlexFallback: false !default;
+$minimal: false !default;
 $rowHeight: map-get($grid-values, "rowHeight");
 $rows: map-get($grid-values, "rows");
 $extraArtboards: map-get($grid-values, "extraArtboards");
diff --git a/examples/material/css-gridish/scss/material-grid-minimal.scss b/examples/material/css-gridish/scss/material-grid-minimal.scss
new file mode 100644
index 0000000..6826a5e
--- /dev/null
+++ b/examples/material/css-gridish/scss/material-grid-minimal.scss
@@ -0,0 +1,3 @@
+$minimal: true;
+
+@import "core.scss";
diff --git a/examples/material/example.html b/examples/material/example.html
index 121f4e0..a1152a0 100644
--- a/examples/material/example.html
+++ b/examples/material/example.html
@@ -180,6 +180,7 @@ <h3>Card Title</h3>
       </section>
     </div>
   </main>
+  <script type="text/javascript" src="./css-gridish/js/material-grid.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/examples/material/index.html b/examples/material/index.html
index 5a2444c..28cef5e 100644
--- a/examples/material/index.html
+++ b/examples/material/index.html
@@ -51,6 +51,7 @@ <h2>Material Example</h2>
     </p>
   </div>
 </body>
+<script type="text/javascript" src="./css-gridish/js/material-grid.js"></script>
 <script>
   function makeNewElement() {
     var colors = ["#F44336", "#673AB7", "#00BCD4", "#FF9800", "#FFEB3B"];
diff --git a/index.html b/index.html
index c3acac5..b25ba75 100644
--- a/index.html
+++ b/index.html
@@ -204,5 +204,6 @@
     </a>
   </div>
 </body>
+<script type="text/javascript" src="./examples/carbon/css-gridish/js/bx-grid.js"></script>
 
 </html>
\ No newline at end of file
diff --git a/src/docs/README.md.hbs b/src/docs/README.md.hbs
index b9c67ff..06716cc 100755
--- a/src/docs/README.md.hbs
+++ b/src/docs/README.md.hbs
@@ -1,12 +1,12 @@
 {{{config.intro}}}
 This grid was bootstrapped using [CSS Gridish](https://github.com/ibm/css-gridish). It includes:
 - CSS Grid Layout code with a Flexbox fallback in CSS and SCSS
-- Sketch file with artboards
+- Sketch design file with artboards
 - Config file (`css-gridish.json`) to review webpages with the [CSS Gridish Chrome Extension](https://chrome.google.com/webstore/detail/css-gridish/ebhcneoilkamaddhlphlehojpcooobgc)
 
 ## Sketch Artboards and Chrome Extension
 
-The Sketch file can be found above in the list of files titled `{{config.prefix}}-grid.sketch`. It includes both grid (CTRL+G) and layout (CTRL+L) settings.
+The Sketch design file can be found above in the list of files titled `{{config.prefix}}-grid.sketch`. It includes both grid (CTRL+G) and layout (CTRL+L) settings.
 
 The Chrome extension uses the same shortcuts. To set the extension up:
 
@@ -14,21 +14,21 @@ The Chrome extension uses the same shortcuts. To set the extension up:
 2. Download the `css-gridish.json` file in this project
 3. Open the CSS Gridish menu in your Chrome toolbar and upload your `css-gridish.json` file
 
-## Legacy Support
+## Files
 
-If you have no need to support browsers like IE 11 and Edge <15, please use `css/{{config.prefix}}-grid.min.css`. This will omit the CSS Flexbox fallback from your code.
+There are three CSS files to choose from based on what browser support you want and whether you will use native CSS Grid rules or our provided classes:
 
-If you are supporting browsers that lack [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), you can use `css/{{config.prefix}}-grid-legacy.min.css` and the legacy classes below. With the legacy file, the browsers that do not support the final CSS Grid Legacy spec will fallback to a flexbox alternative. The flexbox alternative supports embedded subgrids that still reflect the overall grid system’s column structure.
+| Filename | When to Use |
+| ---------- | ----------------- |
+| `css/{{config.prefix}}-grid-legacy.min.css` | To also support browsers that do not have [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility) (IE 11 and Edge <15) with a reliable Flexbox fallback |
+| `css/{{config.prefix}}-grid.min.css` | To only support browsers with [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility) |
+| `css/{{config.prefix}}-grid-minimal.min.css` | To only support browsers with [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), but not use any generated column or height classes |
 
-### Transitioning from Legacy
-
-Once your experience can drop support for IE 11 and Edge <15, you can simply remove all legacy classes and switch over to `css/{{config.prefix}}-grid.min.css`.
+There is also an optional JavaScript file included at `js/{{config.prefix}}-grid.js`. This will adjust the grid to not go behind browser scrollbars since different browsers handle the `vw` unit differently. It applies to any browser that supports [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility) and [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#Browser_compatibility).
 
 ## Breakpoints
 
-There are currently {{length config.breakpoints}} breakpoints where the design specs change for our
-grid. The great thing about CSS Grid Layout is that you can rearrange your
-layout at any custom breakpoint between those:
+A breakpoint is where the number of columns or another value changes using a media query. There are currently {{length config.breakpoints}} breakpoints where the design specs change for our grid. The great thing about CSS Grid Layout is that you can rearrange your layout at any custom breakpoint between those:
 
 | Breakpoint | Number of Columns | Width    | Value  |
 | ---------- | ----------------- | ------- | ------ |
@@ -58,30 +58,37 @@ The example above will create all legacy classes for your custom breakpoints lik
 
 If you are new to CSS Grid, please try [learning the basics](https://www.google.com/search?q=css+grid+tutorials&oq=css+grid+tutorials) before using this. For the most part, you will only have to use `grid-column` and `grid-row` with the following classes:
 
-| Class Name                                | Purpose                                                                                    |
-| ----------------------------------------- | ------------------------------------------------------------------------------------------ |
-| `.{{config.prefix}}-container`                          | Container element of whole page for proper margin and max-width (can be used on body tag ) |
-| `.{{config.prefix}}-container--[left, right]`            | Align the container element to the left or right side                                      |
-| `.{{config.prefix}}-container__bleed--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]`                         | Extend the background color of a container child into the container margin on both sides starting at a specific breakpoint (CSS Grid browsers only)        |
-| `.{{config.prefix}}-container__bleed--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--[left, right]`           | Extend the background color of a grid into the container margin on one side at a specific breakpoint (CSS Grid browsers only)           |
-| `.{{config.prefix}}-container__break--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]`                         | Child of container element should ignore grid’s margin at a specific breakpoint (CSS Grid browsers only)       |
-| `.{{config.prefix}}-container__break--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--[left, right]`           | Child of container element should ignore grid’s margin on one side at a specific breakpoint (CSS Grid browsers only)                             |
-| `.{{config.prefix}}-grid`                               | Use anytime you want to apply CSS Grid Layout, including as embedded subgrids              |
-| `.{{config.prefix}}-grid--fixed-columns`                         | Switch grid’s column widths to fixed instead of fluid                                       |
-| `.{{config.prefix}}-grid--fluid-rows`                         | Switch grid’s row height to match the width of a column                                        |
-| `.{{config.prefix}}-padding`                            | Add one unit of padding to element on all sides                                            |
-| `.{{config.prefix}}-padding--[bottom, left, right, top]` | Add one unit of padding to element on one side                                             |
-| `.{{config.prefix}}-padding--[horizontal, vertical]`     | Add one unit of padding to element on two sides                                            |
-{{#each config.breakpoints}}
-{{#unless @last}}| `.{{../config.prefix}}-grid__col--{{@key}}--[1-{{columns}}]`                          | Set the width out of {{columns}} columns for an item in the grid starting at the {{@key}} breakpoint |
-{{/unless}}{{/each ~}}
-| `.{{config.prefix}}-grid__col--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--0`                          | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified |
-| `.{{config.prefix}}-grid__col--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--0--only`                          | Do not display item only at specific breakpoint |
-| `.{{config.prefix}}-grid__height--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--[1-{{config.rows}}]`                          | Set the min-height based on an interval of {{math config.rowHeight "*" config.rem}}px for an item starting at the breakpoint specified |
-| `.{{config.prefix}}-grid__height--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--0`                          | Reset the min-height for an item starting at the specified breakpoint |
+| Class Name | Purpose | Child? |
+| ---------- | ------- | ------ |
+| `.{{config.prefix}}-container` | Container element of whole page for proper margin and max-width (can be used on body tag). You need to use `.{{config.prefix}}-grid` on this same element. | No |
+| `.{{config.prefix}}-container--[left, right]` | Align the container element to the left or right side | |
+| `.{{config.prefix}}-container__bleed--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]` | Extend the background color of a container child into the container margin on both sides starting at a specific breakpoint (CSS Grid browsers only) | Child of `.{{config.prefix}}-container` |
+| `.{{config.prefix}}-container__bleed--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--[left, right]` | Extend the background color of a grid into the container margin on one side at a specific breakpoint (CSS Grid browsers only) | Child of `.{{config.prefix}}-container` |
+| `.{{config.prefix}}-container__break--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]` |Ignore container’s margin at a specific breakpoint (CSS Grid browsers only) | Child of `.{{config.prefix}}-container` |
+| `.{{config.prefix}}-container__break--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--[left, right]` | Ignore container’s margin on one side at a specific breakpoint (CSS Grid browsers only) | Child of `.{{config.prefix}}-container` |
+| `.{{config.prefix}}-grid` | Use anytime you want to apply CSS Grid Layout, including as embedded subgrids | Peer of `.{{config.prefix}}-container` or direct child of another `.{{config.prefix}}-grid` |
+| `.{{config.prefix}}-grid--fixed-columns` | Switch grid’s column widths to fixed instead of fluid | |
+| `.{{config.prefix}}-grid--fluid-rows` | Switch grid’s row height to match the width of a column | |
+| `.{{config.prefix}}-padding` | Add one unit of padding to element on all sides | Child of `.{{config.prefix}}-grid` |
+| `.{{config.prefix}}-padding--[bottom, left, right, top]` | Add one unit of padding to element on one side | Child of `.{{config.prefix}}-grid` |
+| `.{{config.prefix}}-padding--[horizontal, vertical]` | Add one unit of padding to element on two sides | Child of `.{{config.prefix}}-grid` |
 
 By default, the grid code uses fluid columns and fixed rows. You can switch both aspects with `.{{config.prefix}}-grid--fixed-columns` and `.{{config.prefix}}-grid--fluid-rows`. When switching to fluid rows, the rows will scale across breakpoints just like `col` classes and only supports quantities up to the amount of columns in that breakpoint.
 
+## Optional Classes
+
+The following classes are included in `css/{{config.prefix}}-grid.min.css` and `css/{{config.prefix}}-grid-legacy.min.css`. For the minimal file, you would instead use native CSS Grid rules as needed.
+
+| Class Name | Purpose | Child? |
+| ---------- | ------- | ------ |
+{{#each config.breakpoints}}
+{{#unless @last}}| `.{{../config.prefix}}-grid__col--{{@key}}--[1-{{columns}}]` | Set the width out of {{columns}} columns for an item in the grid starting at the {{@key}} breakpoint | Child of `.{{../config.prefix}}-grid` |
+{{/unless}}{{/each ~}}
+| `.{{config.prefix}}-grid__col--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--0` | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified | Child of `.{{config.prefix}}-grid` |
+| `.{{config.prefix}}-grid__col--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--0--only` | Do not display item only at specific breakpoint | Child of `.{{config.prefix}}-grid` |
+| `.{{config.prefix}}-grid__height--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--[1-{{config.rows}}]` | Set the min-height based on an interval of {{math config.rowHeight "*" config.rem}}px for an item starting at the breakpoint specified | Child of `.{{config.prefix}}-grid` |
+| `.{{config.prefix}}-grid__height--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--0` | Reset the min-height for an item starting at the specified breakpoint | Child of `.{{config.prefix}}-grid` |
+
 If you follow the instructions above for custom breakpoints, all of the `col` and `height` classes will generate with a version for each custom breakpoint too. For example, adding the custom breakpoint of `whateversize` will create `.{{config.prefix}}-grid__col--whateversize--1`. Since that custom breakpoint is right after the previous breakpoint, it will have the same amount of columns and min-height.
 
 ## Variables
@@ -184,22 +191,22 @@ button {
 
 A lot of times, you will want an item to break out of the gutters for background color, to extend media, or for another reason. Until the CSS Grid spec has a way to ignore that gutter, we use the padding classes (`.{{config.prefix}}-padding`) to opt-in to respecting the gutter. The padding classes are always half the size of a gutter for alignment.
 
-### Why is the fallback using flexbox instead of the `-ms` prefix use of CSS Grid?
+### Why is the legacy version using Flexbox instead of the `-ms` prefix use of CSS Grid?
 
 The biggest reason is due to the lack of auto-placement when using that prefix. See more details about difference in the `-ms` prefix in [this blog post.](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/)
 
+### Why are there no grouping row classes needed?
+
+Thanks to flexbox’s wrapping functionality, nodes that specify rows are not necessary. Only create a node for a row if it has semantic or accessibility significance. You can keep embedding `.{{config.prefix}}-grid` as necessary to accomplish this.
+
+### What happens if I specify the column class for one breakpoint, but not the column class for the next breakpoint?
+
+To maintain a mobile-first opinion, column widths will scale to the next breakpoint if not specified. This means that a `.{{config.prefix}}-grid__col--{{config.classBreakpoints.[0]}}--1` be the size of `.{{config.prefix}}-grid__col--{{config.classBreakpoints.[1]}}--2` if no `{{config.classBreakpoints.[1]}}` class was declared.
+
 ### Why are columns using vw units and sometimes the calc function?
 
 Until Edge and Safari support
 [`display: subgrid`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility),
 it is difficult for you to write semantic HTML with CSS Grid Layout. We are
 able to take advantage of vw units and the calc function so you can embed 
-`.{{config.prefix}}-grid` elements inside of each other and still respect the overall grid design.
-
-### Why are there no grouping row classes needed?
-
-Thanks to flexbox’s wrapping functionality, nodes that specify rows are not necessary. Only create a node for a row if it has semantic or accessibility significance. You can keep embedding `.{{config.prefix}}-grid` as necessary to accomplish this.
-
-### What happens in the legacy implementation if I specify the column width for one breakpoint, but not the next larger breakpoint?
-
-To maintain a mobile-first opinion, column widths will scale to the next breakpoint if not specified. This means that a `.{{config.prefix}}-grid__col--{{config.classBreakpoints.[0]}}--1` be the size of `.{{config.prefix}}-grid__col--{{config.classBreakpoints.[1]}}--2` if no `{{config.classBreakpoints.[1]}}` class was declared.
\ No newline at end of file
+`.{{config.prefix}}-grid` elements inside of each other and still respect the overall grid design.
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index a70a012..d82be0f 100755
--- a/src/index.js
+++ b/src/index.js
@@ -27,6 +27,7 @@ const route =
 const dirDest = `${dirRoot}/${route}`;
 const dirDestCss = `${dirDest}/\css`;
 const dirDestDesign = `${__dirname}/css-gridish-design.json`;
+const dirDestJs = `${dirDest}/js`;
 const dirDestScss = `${dirDest}/s\css`;
 const dirDestSketch = `${dirDest}/sketch`;
 const prefix = config.prefix ? config.prefix : "gridish";
@@ -67,10 +68,15 @@ handlebars.registerHelper("math", function(lvalue, operator, rvalue, options) {
 });
 
 gulp.task("clean", function() {
-  return del([dirDestCss, dirDestScss, `${dirDest}/${prefix}-grid.sketch`]);
+  return del([
+    dirDestCss,
+    dirDestJs,
+    dirDestScss,
+    `${dirDest}/${prefix}-grid.sketch`
+  ]);
 });
 
-gulp.task("css", ["scssRenameLegacy"], function() {
+gulp.task("css", ["scssRenameMinimal"], function() {
   return gulp
     .src(`${dirDestScss}/${prefix}-grid.s\css`)
     .pipe(sass().on("error", sass.logError))
@@ -100,7 +106,22 @@ gulp.task("css-legacy", ["css"], function() {
     .pipe(gulp.dest(dirDestCss));
 });
 
-gulp.task("docs", ["css-legacy"], function() {
+gulp.task("css-minimal", ["css-legacy"], function() {
+  return gulp
+    .src(`${dirDestScss}/${prefix}-grid-minimal.s\css`)
+    .pipe(sass().on("error", sass.logError))
+    .pipe(rename(`${prefix}-grid-minimal.\css`))
+    .pipe(gulp.dest(dirDestCss))
+    .pipe(
+      cleanCSS({
+        level: 2
+      })
+    )
+    .pipe(rename(`${prefix}-grid-minimal.min.\css`))
+    .pipe(gulp.dest(dirDestCss));
+});
+
+gulp.task("docs", ["js"], function() {
   return gulp
     .src(`${__dirname}/docs/*.hbs`)
     .pipe(
@@ -129,6 +150,13 @@ gulp.task("docs", ["css-legacy"], function() {
     .pipe(gulp.dest(dirDest));
 });
 
+gulp.task("js", ["css-minimal"], function() {
+  return gulp
+    .src(`${__dirname}/js/gridish-grid.js`)
+    .pipe(rename(`${prefix}-grid.js`))
+    .pipe(gulp.dest(dirDestJs));
+});
+
 gulp.task("scss", ["valuesClean"], function() {
   return gulp.src(`${__dirname}/scss/**/*.s\css`).pipe(gulp.dest(dirDestScss));
 });
@@ -149,6 +177,14 @@ gulp.task("scssRenameLegacy", ["scssRename"], function() {
     .pipe(gulp.dest(dirDestScss));
 });
 
+gulp.task("scssRenameMinimal", ["scssRenameLegacy"], function() {
+  return gulp
+    .src(`${dirDestScss}/gridish-grid-minimal.s\css`)
+    .pipe(vinylPaths(del))
+    .pipe(rename(`${prefix}-grid-minimal.s\css`))
+    .pipe(gulp.dest(dirDestScss));
+});
+
 gulp.task("sketchClean", ["sketchZip"], function() {
   return del([dirDestSketch]);
 });
diff --git a/src/js/gridish-grid.js b/src/js/gridish-grid.js
new file mode 100644
index 0000000..6bd20d4
--- /dev/null
+++ b/src/js/gridish-grid.js
@@ -0,0 +1,20 @@
+(function () {
+  var updateScrollbarWidth = function () {
+    const scrollbarWidth =
+      window.innerWidth - document.documentElement.clientWidth + "px";
+
+    document.documentElement.style.setProperty(
+      "--scrollbar-width",
+      scrollbarWidth
+    );
+  };
+
+  var scrollbarObserver = new MutationObserver(updateScrollbarWidth);
+  scrollbarObserver.observe(document.body, {
+    attributes: true,
+    childList: true,
+    characterData: true
+  });
+
+  updateScrollbarWidth();
+})();
\ No newline at end of file
diff --git a/src/scss/_core.scss b/src/scss/_core.scss
index 0df8cfd..7ea5a1d 100755
--- a/src/scss/_core.scss
+++ b/src/scss/_core.scss
@@ -17,6 +17,7 @@ body {
   margin-right: auto;
   max-width: #{map-get($last, breakpoint)}rem;
   overflow-x: hidden;
+  padding-right: var(--scrollbar-width);
   width: 100vw;
 }
 
@@ -77,21 +78,26 @@ body {
   }
 }
 
-@include grid-legacy-wrapper($includeFlexFallback) {
-  :root {
+:root {
+  --scrollbar-width: 0px;
+  @include grid-legacy-wrapper($includeFlexFallback) {
     @include grid-heights-fixed($rows);
   }
 }
 
 @each $name, $breakpoint in $allBreakpoints {
   @include media-query($name) {
-    @if is-same-breakpoint($breakpoint, $last) == false {
+    @if is-same-breakpoint($breakpoint, $last) == false and $minimal == false {
       @include grid-legacy-heights($name);
     }
-    @include grid-legacy-zeros($breakpoint, $name);
+    @if $minimal == false {
+      @include grid-legacy-zeros($breakpoint, $name);
+    }
     @include grid-padding($breakpoint);
     @include grid($breakpoint, $name);
-    @include grid-legacy-columns($breakpoint, $name);
+    @if $minimal == false {
+      @include grid-legacy-columns($breakpoint, $name);
+    }
 
     // Wrap all bleed/break classes and css variables in a CSS Grid support query
     @include grid-legacy-wrapper($includeFlexFallback) {
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index cf7bf4b..0851a57 100755
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -1,13 +1,15 @@
 // Set the width of a grid’s column
 @mixin grid($breakpoint, $breakpointName) {
   @if (map-get($breakpoint, columns) != null) {
-    $columnSize: get-fluid-size($breakpointName, 1);
+    $columnSize: get-fluid-size($breakpointName, 1, false);
+    $columnSizeScrollbar: get-fluid-size($breakpointName, 1);
 
     .#{$prefix}-grid {
       @if is-same-breakpoint($breakpoint, $first) {
         grid-auto-rows: minmax($rowHeight * 1rem, min-content);
       }
       grid-template-columns: repeat(auto-fill, $columnSize);
+      grid-template-columns: repeat(auto-fill, $columnSizeScrollbar);
 
       &.#{$prefix}-grid--fixed-columns {
         grid-template-columns: repeat(
@@ -20,6 +22,7 @@
 
       &.#{$prefix}-grid--fluid-rows {
         grid-auto-rows: $columnSize;
+        grid-auto-rows: $columnSizeScrollbar;
       }
 
       @if is-same-breakpoint($breakpoint, $last) == false {
@@ -55,7 +58,8 @@
           $columnMultiplier: $i *
             map-get($breakpoint, columns) /
             map-get($currentBreakpoint, columns);
-          $columnSize: get-fluid-size($name, $columnMultiplier);
+          $columnSize: get-fluid-size($name, $columnMultiplier, false);
+          $columnSizeScrollbar: get-fluid-size($name, $columnMultiplier);
 
           $isSecondToLast: is-same-breakpoint(
             $breakpoint,
@@ -63,6 +67,11 @@
           );
 
           $maxColumnSize: get-fluid-size(
+            nth(nth($allBreakpoints, length($allBreakpoints)), 1),
+            $columnMultiplier,
+            false
+          );
+          $maxColumnSizeScrollbar: get-fluid-size(
             nth(nth($allBreakpoints, length($allBreakpoints)), 1),
             $columnMultiplier
           );
@@ -72,8 +81,10 @@
               // If second-to-last media query, apply max-width instead of remaking classes in last media query
               @if $isSecondToLast {
                 max-width: $maxColumnSize;
+                max-width: $maxColumnSizeScrollbar;
               }
               width: $columnSize;
+              width: $columnSizeScrollbar;
             }
             grid-column: span #{$columnMultiplier};
 
@@ -89,10 +100,13 @@
             grid-row: span $i;
             @if $includeFlexFallback {
               height: $columnSize;
+              height: $columnSizeScrollbar;
               min-height: $columnSize;
+              min-height: $columnSizeScrollbar;
               // If second-to-last media query, apply max-height instead of remaking classes in last media query
               @if $isSecondToLast {
                 max-height: $maxColumnSize;
+                max-height: $maxColumnSizeScrollbar;
               }
             }
           }
diff --git a/src/scss/_utilities.scss b/src/scss/_utilities.scss
index 1d29635..31d2fd1 100644
--- a/src/scss/_utilities.scss
+++ b/src/scss/_utilities.scss
@@ -18,6 +18,7 @@
 /// Returns a calc() expression that represents a fluid width at a given breakpoint.
 /// @param {String} $breakpointName A valid breakpoint.
 /// @param {Number} $columnSpan The number of columns to span across.
+/// @param {Boolean} $supportsCSSVariable Does the output rule include CSS Variables?
 /// @return {Length} A calc() expression representing fluid width.
 /// @example scss
 /// button {
@@ -31,7 +32,11 @@
 ///     max-width: 25vw;
 ///   }
 /// }
-@function get-fluid-size($breakpointName, $columnSpan) {
+@function get-fluid-size(
+  $breakpointName,
+  $columnSpan,
+  $supportsCSSVariable: true
+) {
   $breakpoint: map-get($breakpointsAndArtboards, $breakpointName);
 
   @if ($breakpoint == null or type-of($breakpoint) != "map") {
@@ -54,16 +59,27 @@
   }
 
   $container: 100vw;
+  @if ($supportsCSSVariable) {
+    $container: "(100vw - var(--scrollbar-width))";
+  }
+
   // Last breakpoint is a max-width and should be a fixed number
   @if is-same-breakpoint($breakpoint, $last) {
     $container: map-get($breakpoint, breakpoint) * 1rem;
+    @if ($supportsCSSVariable) {
+      $container: "(#{$container} - var(--scrollbar-width))";
+    }
   }
 
   $multiplier: round-decimal($columnSpan / $columnTotal, 4, floor);
 
   // For IE, we can't have a 0 in the $fluidWidth calc().
   @if ($margin == 0) {
-    @return $container * $multiplier;
+    @if ($supportsCSSVariable) {
+      @return calc(#{$container}* #{$multiplier});
+    } @else {
+      @return $container * $multiplier;
+    }
   }
 
   @return calc((#{$container} - #{$margin * 2}) * #{$multiplier});
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 19b5e36..1863d1e 100755
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -9,6 +9,7 @@ $breakpoints: add-padding(map-get($grid-values, "breakpoints"));
 $first: nth(nth($breakpoints, 1), 2);
 $last: nth(nth($breakpoints, -1), 2);
 $includeFlexFallback: false !default;
+$minimal: false !default;
 $rowHeight: map-get($grid-values, "rowHeight");
 $rows: map-get($grid-values, "rows");
 $extraArtboards: map-get($grid-values, "extraArtboards");
diff --git a/src/scss/gridish-grid-minimal.scss b/src/scss/gridish-grid-minimal.scss
new file mode 100644
index 0000000..6826a5e
--- /dev/null
+++ b/src/scss/gridish-grid-minimal.scss
@@ -0,0 +1,3 @@
+$minimal: true;
+
+@import "core.scss";