remove grid mixin

ui/src/css/base/_config.scss

@@ -14,10 +14,6 @@ Config settings.
     --gutter-l: var(--space-m-l);
     --gutter-xl: var(--space-l-xl);
 
-    /* Grid columns. */
-    --grid-item-min-width: 12.5rem;
-    --grid-item-max-width: 17.5rem;
-
     /* Borders. */
     --border-width-s: 0.0625rem;
     --border-width-m: 0.125rem;

ui/src/css/base/_type.scss

@@ -57,9 +57,5 @@ Font-face rules.
     --type-max-line-length: 65ch;
 }
 
-/*
-----------------------------------------------------------------------------
-Base font settings.
-----------------------------------------------------------------------------
-*/
+/* TODO - Base font settings. */
 $base-color: $color-text !default;

ui/src/css/components/_card.scss

@@ -72,9 +72,8 @@ Dependencies.
 
     // Cards in a grid.
     &-grid.grid {
-        --card-max-width: 25rem; // Same width as image.
-
-        @include responsive-grid-auto-columns($max-width: max-content);
+        --card-max-width: 25rem; // Same width as image.: 100px;
+        --grid-item-max-width: max-content;
 
         > * {
             max-inline-size: var(--card-max-width);

ui/src/css/layouts/_grid.scss

@@ -7,7 +7,10 @@ Dependencies.
 @use '../base' as *;
 
 [class*='grid'] {
-    --grid-gap: #{var(--gutter-m)};
+    --grid-auto-layout: auto-fit;
+    --grid-gap: var(--gutter-m);
+    --grid-item-min-width: 12.5rem;
+    --grid-item-max-width: 1fr;
 
     display: grid;
     gap: var(--grid-gap, 1rem);
@@ -23,9 +26,38 @@ Dependencies.
     }
 }
 
+// Asymmetric 2-col grid (with default column widths).
+[class*='asymmetric'] {
+    --grid-asymmetric-col1: 66.66%;
+    --grid-asymmetric-col2: 33.33%;
+    --grid-container-width: 25rem; // --grid-item-min-width * 2
+
+    // Container queries.
+    @container (inline-size >= 25rem) {
+        grid-template-columns:
+            minmax(var(--grid-item-min-width), var(--grid-asymmetric-col1))
+            minmax(var(--grid-item-min-width), var(--grid-asymmetric-col2));
+    }
+
+    // Fallback.
+    @supports not (container-type: inline-size) {
+        @include bp-medium {
+            grid-template-columns:
+                minmax(var(--grid-item-min-width), var(--grid-asymmetric-col1))
+                minmax(var(--grid-item-min-width), var(--grid-asymmetric-col2));
+        }
+    }
+}
+
 .grid {
     // Automatic grid layout (e.g. for galleries, card listings, etc)
-    @include responsive-grid-auto-columns;
+    grid-template-columns: repeat(
+        var(--grid-auto-layout),
+        minmax(
+            min(var(--grid-item-min-width), 100%),
+            var(--grid-item-max-width)
+        )
+    );
 
     // Centered grid.
     &--centered {
@@ -56,21 +88,18 @@ Dependencies.
 
     // Enable 2-col on small screens (even without a media query)... though eventually the column 'min-width' will enforce stacking when space is too limited, to avoid overflows.
     &--2-cols\@small {
-        @include responsive-grid-auto-columns($min-width: 6.25rem);
-    }
-
-    // Asymmetric 2-col grid (with default column widths).
-    &--asymmetric {
-        @include responsive-grid-asymmetric;
+        --grid-item-min-width: 6.25rem;
     }
 
     // Asymmetric 2-col grid (with column width overrides).
-    &--75-25 {
-        @include responsive-grid-asymmetric($col1: 75%, $col2: 25%);
+    &--asymmetric-75-25 {
+        --grid-asymmetric-col1: 75%;
+        --grid-asymmetric-col2: 25%;
     }
 
-    &--25-75 {
-        @include responsive-grid-asymmetric($col1: 25%, $col2: 75%);
+    &--asymmetric-25-75 {
+        --grid-asymmetric-col1: 25%;
+        --grid-asymmetric-col2: 75%;
     }
 
     // Using container queries for (asymmetric) grids.

ui/src/css/mixins/_index.scss

@@ -2,6 +2,5 @@
 @forward 'button-reset';
 @forward 'focus';
 @forward 'form-field-reset';
-@forward 'grid';
 @forward 'off-screen';
 @forward 'z-index';

ui/src/css/web-components/_webui-image-gallery.scss

@@ -20,7 +20,7 @@ webui-image-gallery {
     }
 
     .grid {
-        @include responsive-grid-auto-columns($auto-layout: auto-fill);
+        --grid-auto-layout: auto-fill;
 
         > * {
             display: block;

ui/src/css/web-components/_webui-predictive-search.scss

@@ -18,7 +18,7 @@ webui-predictive-search {
     }
 
     .grid {
-        @include responsive-grid-auto-columns($max-width: 10rem);
+        --grid-item-max-width: 10rem;
     }
 
     .search__result {

ui/stories/3. Layout/Grid/Grid.js

@@ -102,7 +102,7 @@ ${style}
 </div>
 
 <div class="grid-container">
-    <div class="grid--75-25 ${args.gap === undefined ? '' : `grid--${args.gap}`}">
+    <div class="grid--asymmetric-75-25 ${args.gap === undefined ? '' : `grid--${args.gap}`}">
         <div>
             Asymmetric col 1<br>
             Override width = 75%
@@ -115,7 +115,7 @@ ${style}
 </div>
 
 <div class="grid-container">
-    <div class="grid--25-75 ${args.gap === undefined ? '' : `grid--${args.gap}`}">
+    <div class="grid--asymmetric-25-75 ${args.gap === undefined ? '' : `grid--${args.gap}`}">
         <div>
             Asymmetric col 1<br>
             Override width = 25%

ui/stories/3. Layout/Grid/Grid.mdx

@@ -7,13 +7,16 @@ import * as Grid from './Grid.stories';
 - Grid layouts use `CSS Grid` in most cases.
 - By default, the grid component [auto-arranges the grid items](https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/) based on available space, with **no CSS media queries**.
 - Auto-arranging is ideal for components such as image galleries, card listings, etc.
-    - In these scenarios, set an explicit `$max-width` to prevent cards getting too wide.
+    - In these scenarios, set an explicit `--grid-item-max-width` to prevent cards getting too wide.
 - Auto-arranging is also ideal when dividing a page, or a section of a page, into **equal width** columns.
-- This behaviour is achieved using this code in the relevant Sass mixin:
+- This behaviour is achieved using the following `grid-template-columns` definition:
 ```
 grid-template-columns: repeat(
-    #{$auto-layout},
-    minmax(min(#{$min-width}, 100%), #{$max-width})
+    var(--grid-auto-layout),
+    minmax(
+        min(var(--grid-item-min-width), 100%),
+        var(--grid-item-max-width)
+    )
 );
 ```
 
@@ -23,33 +26,34 @@ grid-template-columns: repeat(
 ## When to use Grid or Flexbox?
 - Please see [useful layout tips](/docs/layout-useful-layout-tips--docs).
 
-## Description of Sass variables used in `grid-template-columns`
+## Description of CSS custom properties used in `grid-template-columns`
 
 Variable | Functionality
 --- | ---
-`$auto-layout` | Either `auto-fit` (**default**) or `auto-fill`. Allows grid to reflow automatically at different screen widths without any media queries. See [this CSS Tricks article](https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/) for an explanation of the subtle differences between them.
-`$min-width` | Minimum grid column width.
-`$max-width` | Maximum grid column width.
+`--grid-auto-layout` | Either `auto-fit` (**default**) or `auto-fill`. Allows grid to reflow automatically at different screen widths without any media queries. See [this CSS Tricks article](https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/) for an explanation of the subtle differences between them.
+`--grid-item-min-width` | Minimum grid column width.
+`--grid-item-max-width` | Maximum grid column width.
 
 
 ## Override grid behaviour
 
-### 1. Change grid cell `min-width` and `max-width` in Sass mixin
+### 1. Change `--grid-item-min-width` and `--grid-item-max-width` custom properties
 - See [cards in a grid](/story/components-cards--card-grid) for a real example.
 - Generally speaking, for a grid of `widget` components, you can do:
 ```
 widget-grid.grid {
-    @include responsive-grid-auto-columns($min-width: 17.5rem);
+    --grid-item-min-width: 20rem;
 }
 ```
 ```
 widget-grid.grid {
-    @include responsive-grid-auto-columns($max-width: 30rem);
+    --grid-item-max-width: 30rem;
 }
 ```
 ```
 widget-grid.grid {
-    @include responsive-grid-auto-columns($min-width: 17.5rem, $max-width: 30rem);
+    --grid-item-min-width: 20rem;
+    --grid-item-max-width: 30rem;
 }
 ```
 
@@ -81,19 +85,11 @@ widget-grid.grid {
 <Controls of={Grid.Grid3EqualCols} />
 
 ## Asymmetric 2-column layouts
-### 1. Use default column widths as defined in Sass mixin
+### 1. Use default column widths (66.66% and 33.33%)
 - Simply define a `.grid--asymmetric` parent with 2 direct children.
 
 ### 2. Specify column widths using explicit CSS classnames
-- For example, `.grid--75-25` or `.grid--25-75`.
-
-### 3. Specify column width overrides using the Sass mixin
-- For example, for a grid of `widget` components:
-```
-.widget-grid {
-    @include responsive-grid-asymmetric($col1: 75%, $col2: 25%);
-}
-```
+- For example, `.grid--asymmetric-75-25` or `.grid--asymmetric-25-75`.
 
 <Canvas of={Grid.GridAsymmetric} />
 <Controls of={Grid.GridAsymmetric} />