feat: add grid item responsive feature

Author: linspw

src/components/atoms/a-grid/a-grid-item.scss

@@ -4,21 +4,32 @@
   position: relative;
 }
 
-@for $i from 1 through 12 {
-  .a-grid-item--column-#{$i} {
-    grid-column: span #{$i};
-
-    @include for-medium-desktop-down{
-      @if $i >= 6 {
+.a-grid-item--responsive {
+  @for $i from 1 through 12 {
+    &.a-grid-item--column-#{$i} {
+      grid-column: span #{$i};
+  
+      @include for-medium-desktop-down{
+        @if $i >= 6 {
+          grid-column: span 12;
+        } @else {
+          grid-column: span 6;
+        }
+      }
+      @include for-large-tablet-down {
         grid-column: span 12;
-      } @else {
-        grid-column: span 6;
       }
     }
-    @include for-large-tablet-down {
-      grid-column: span 12;
+    &.a-grid-item--row-#{$i} {
+      grid-row: span #{$i};
     }
   }
+}
+
+@for $i from 1 through 12 {
+  .a-grid-item--column-#{$i} {
+    grid-column: span #{$i};
+  }
   .a-grid-item--row-#{$i} {
     grid-row: span #{$i};
   }

src/components/atoms/a-grid/a-grid-item.vue

@@ -5,6 +5,7 @@
       [`a-grid-item--behavior-${behavior}`]: behavior,
       [`a-grid-item--column-${column}`]: column,
       [`a-grid-item--row-${row}`]: row,
+      ['a-grid-item--responsive']: responsive,
     }"
     class="a-grid-item"
   >
@@ -31,6 +32,10 @@ export default {
       type: String,
       default: 'div',
     },
+    responsive: {
+      type: Boolean,
+      default: true,
+    },
   },
 };
 </script>

src/components/atoms/a-grid/a-grid.stories.mdx

@@ -27,6 +27,24 @@ AGridItem is where you control the item wrapper in layout.
   </Story>
 </Canvas>
 
+### Responsive use:
+
+<Canvas>
+  <Story name="Responsive use">
+    {{
+        components: { AGridContainer, AGridItem },
+        template: `
+        <a-grid-container style="background-color:blue;">
+          <a-grid-item style="background-color:yellow;" column="4" :responsive="true">yellow</a-grid-item>
+          <a-grid-item style="background-color:red;" column="6" :responsive="true">red</a-grid-item>
+          <a-grid-item style="background-color:orange;" column="4" :responsive="false">orange</a-grid-item>
+          <a-grid-item style="background-color:green;" column="6" :responsive="false">green</a-grid-item>
+        </a-grid-container>
+        `,
+    }}
+  </Story>
+</Canvas>
+
 ### With padding:
 
 <Canvas>