Card container queries

src/components/card/Card.stories.js

@@ -176,6 +176,35 @@ export default {
         category: 'Container',
       },
     },
+    grid_type: {
+      name: 'Grid',
+      options: [
+        'onecol',
+        'onecol__narrow',
+        'twocol--50-50',
+        'threecol--33-34-33',
+        'fourcol--25',
+      ],
+      control: {
+        type: 'select',
+        labels: {
+          'onecol': 'One column',
+          'onecol__narrow': 'One column (narrow)',
+          'twocol--50-50': 'Two columns',
+          'threecol--33-34-33': 'Three columns',
+          'fourcol--25': 'Four columns',
+        }
+      },
+      table: {
+        category: 'Container',
+      },
+    },
+    record_count: {
+      name: '# of records',
+      table: {
+        category: 'Container',
+      },
+    }
   },
 };
 
@@ -346,8 +375,8 @@ const GridTemplate = (args) => ({
   // And then the `args` are bound to your component with `v-bind="args"`
   template: `
     <div :class="args.section_background" style="padding-top: 2rem; padding-bottom: 2rem;">
-      <uids-grid :type="args.type">
-        <uids-grid-item v-for="item in args.records" :key="item">
+      <uids-grid :type="args.grid_type">
+        <uids-grid-item v-for="item in args.record_count" :key="item">
           <uids-card
             :url="args.url"
             :link_text="args.link_text"
@@ -375,9 +404,9 @@ const GridTemplate = (args) => ({
   `,
 })
 
-export const Grid3Columns = GridTemplate.bind({})
-Grid3Columns.args = {
+export const Grid = GridTemplate.bind({})
+Grid.args = {
   ...Default.args,
-  type: 'threecol--33-34-33',
-  records: 3,
+  grid_type: 'threecol--33-34-33',
+  record_count: 3,
 }

src/scss/components/card.scss

@@ -2,6 +2,20 @@
 @import '../abstracts/utilities';
 @import 'border';
 
+
+@mixin container-query() {
+  @supports (contain: inline-size) {
+    @container column (min-width: #{$break-xxsm}) {
+      @content
+    }
+  }
+  @supports not (contain: inline-size) {
+    @include breakpoint(sm) {
+      @content
+    }
+  }
+}
+
 // === Card === //
 .card {
   position: relative;
@@ -96,7 +110,7 @@
   > .media {
     margin-top: 0;
     text-align: center;
-    min-width: 9.375rem;
+    min-width: 7.7rem;
 
     img {
       width: 100%;
@@ -228,15 +242,15 @@
 
     &.card--layout-left {
       .media__inner {
-        @include breakpoint(sm) {
+        @include container-query() {
           margin-right: 2rem;
         }
       }
     }
 
     &.card--layout-right {
       .media__inner {
-        @include breakpoint(sm) {
+        @include container-query() {
           margin-left: 2rem;
         }
       }
@@ -285,10 +299,7 @@
 // === Layout left and layout right shared === //
 .card--layout-left,
 .card--layout-right {
-  .media__inner {
-
-  }
-  @include breakpoint(sm) {
+  @include container-query() {
     display: flex;
     flex-direction: row;
     width: 100%;
@@ -310,21 +321,23 @@
   }
 
   .media--small.media--square {
-    @include breakpoint(sm) {
+    @include container-query() {
       max-width: 11.375rem;
     }
   }
 
   .media--small.media--widescreen {
-    @include breakpoint(sm) {
+    @include container-query() {
       max-width: 15.625rem;
     }
   }
 
   .media--medium {
     &.media--circle {
-      @include breakpoint(sm) {
-        max-width: none;
+      @supports not (contain: inline-size) {
+        @include breakpoint(sm) {
+          max-width: none;
+        }
       }
     }
     @include breakpoint(sm) {
@@ -342,11 +355,11 @@
 
 // === Layout left === //
 .card--layout-left {
-  @include breakpoint(sm) {
+  @include container-query() {
     flex-direction: row;
 
     .media__inner,
-    // Add margin back in for media--circle since we removed it before.
+      // Add margin back in for media--circle since we removed it before.
     .media--circle .media__inner {
       margin-right: 2rem;
     }
@@ -356,11 +369,10 @@
 
 // === Layout right === //
 .card--layout-right {
-  @include breakpoint(sm) {
+  @include container-query() {
     flex-direction: row-reverse;
-
     .media__inner,
-    // Add margin back in for media--circle since we removed it before.
+      // Add margin back in for media--circle since we removed it before.
     .media--circle .media__inner {
       margin-left: 2rem;
     }

src/scss/layout/_grid.scss

@@ -1,22 +1,36 @@
 @import '../abstracts/variables';
 @import '../abstracts/utilities';
 
-.grid--threecol--33-34-33 {
+.grid--onecol {
+  .list-container__inner {
+    max-width: 81.875em;
+    margin: 0 auto;
+  }
+}
+
+.grid--onecol__narrow {
+  .list-container__inner {
+    max-width: 63.75em;
+    margin: 0 auto;
+  }
+}
+
+.grid--twocol--50-50 {
   .list-container__inner {
     gap: $mobile-height-gutter;
     @include grid-base;
     @include breakpoint(sm) {
-      @include threecol-grid;
+      @include twocol-grid;
     }
   }
 }
 
-.grid--twocol--50-50 {
+.grid--threecol--33-34-33 {
   .list-container__inner {
     gap: $mobile-height-gutter;
     @include grid-base;
     @include breakpoint(sm) {
-      @include twocol-grid;
+      @include threecol-grid;
     }
   }
 }
@@ -43,23 +57,20 @@
   }
 }
 
-.grid--onecol {
-  .list-container__inner {
-    max-width: 81.875em;
-    margin: 0 auto;
-  }
-}
-
-.grid--onecol__narrow {
+.grid--fourcol--25 {
   .list-container__inner {
-    max-width: 63.75em;
-    margin: 0 auto;
+    gap: $mobile-height-gutter;
+    @include grid-base;
+    @include breakpoint(sm) {
+      @include fourcol-grid;
+    }
   }
 }
 
 // Declare which containers to query.
 @supports (contain: inline-size) {
-  .grid__column {
+  .grid__column,
+  .column-container {
     container-type: inline-size;
     container-name: column;
   }