diff --git a/packages/components/icons1/icons.json b/packages/components/icons1/icons.json
deleted file mode 100644
index 0637a088a01e8ddab3bf3fa98dbe804cbde1a0dc..0000000000000000000000000000000000000000
--- a/packages/components/icons1/icons.json
+++ /dev/null
@@ -1 +0,0 @@
-[]
\ No newline at end of file
diff --git a/packages/components/icons1/index.ts b/packages/components/icons1/index.ts
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index 67d374731d2773226bf6e853e43a59e88825c7ee..3034c0238583b171b6acecab7e96579da84bb701 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensig/opendesign",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "es/index.d.ts",
diff --git a/packages/opendesign/src/components/grid/OCol.vue b/packages/opendesign/src/components/grid/OCol.vue
index d3b781a7973b4dc50b5d585376d7cdb337f1031a..176f96e3a7983572142009a2d9d9e21835fa1530 100644
--- a/packages/opendesign/src/components/grid/OCol.vue
+++ b/packages/opendesign/src/components/grid/OCol.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { colProps } from './types';
+import { colProps, mediaSize, ColMediaT, ColPropsT } from './types';
 import { computed, StyleValue } from 'vue';
 
 const props = defineProps(colProps);
@@ -34,25 +34,12 @@ const style = computed(() => {
   if (props.align) {
     s['--col-align'] = props.align;
   }
-
-  if (props.xs) {
-    s['--col-basis-xs'] = props.xs.width;
-  }
-  if (props.s) {
-    s['--col-basis-s'] = props.s.width;
-  }
-  if (props.m) {
-    s['--col-basis-m'] = props.m.width;
-  }
-  if (props.l) {
-    s['--col-basis-l'] = props.l.width;
-  }
-  if (props.xl) {
-    s['--col-basis-xl'] = props.xl.width;
-  }
-  if (props.xxl) {
-    s['--col-basis-xxl'] = props.xxl.width;
-  }
+  mediaSize.forEach((k) => {
+    const v = props[k as keyof ColPropsT] as ColMediaT;
+    if (v) {
+      s[`--col-basis-${k}` as keyof Vars] = v.width;
+    }
+  });
   return s as StyleValue;
 });
 </script>
diff --git a/packages/opendesign/src/components/grid/ORow.vue b/packages/opendesign/src/components/grid/ORow.vue
index 5e53bb5b0cd3ddefc97f9d59eac747892f58aacd..ff5dd2503ec3c4b2f4d1765357f72a33cc3fd97c 100644
--- a/packages/opendesign/src/components/grid/ORow.vue
+++ b/packages/opendesign/src/components/grid/ORow.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { rowProps } from './types';
+import { rowProps, mediaSize, RowPropsT, RowMediaT } from './types';
 import { computed, StyleValue } from 'vue';
 
 const props = defineProps(rowProps);
@@ -13,6 +13,30 @@ interface Vars {
   '--col-gap-x'?: string;
   '--row-gap-y'?: string;
   '--col-gap-y'?: string;
+  '--row-gap-x-xs'?: string;
+  '--col-gap-x-xs'?: string;
+  '--row-gap-y-xs'?: string;
+  '--col-gap-y-xs'?: string;
+  '--row-gap-x-s'?: string;
+  '--col-gap-x-s'?: string;
+  '--row-gap-y-s'?: string;
+  '--col-gap-y-s'?: string;
+  '--row-gap-x-m'?: string;
+  '--col-gap-x-m'?: string;
+  '--row-gap-y-m'?: string;
+  '--col-gap-y-m'?: string;
+  '--row-gap-x-l'?: string;
+  '--col-gap-x-l'?: string;
+  '--row-gap-y-l'?: string;
+  '--col-gap-y-l'?: string;
+  '--row-gap-x-xl'?: string;
+  '--col-gap-x-xl'?: string;
+  '--row-gap-y-xl'?: string;
+  '--col-gap-y-xl'?: string;
+  '--row-gap-x-xxl'?: string;
+  '--col-gap-x-xxl'?: string;
+  '--row-gap-y-xxl'?: string;
+  '--col-gap-y-xxl'?: string;
 }
 const style = computed(() => {
   const s: Vars = {};
@@ -36,8 +60,20 @@ const style = computed(() => {
     s['--col-gap-y'] = props.gapY;
     s['--row-gap-y'] = `calc(-1 * ${props.gapY})`;
   }
-  console.log(s);
 
+  mediaSize.forEach((key) => {
+    const v = props[key as keyof RowPropsT] as RowMediaT;
+    if (v) {
+      if (v.gapX) {
+        s[`--col-gap-x-${key}` as keyof Vars] = `calc(${v.gapX} / 2)`;
+        s[`--row-gap-x-${key}` as keyof Vars] = `calc(-1 * ${v.gapX} / 2)`;
+      }
+      if (v.gapY) {
+        s[`--col-gap-y-${key}` as keyof Vars] = `calc(${v.gapY} / 2)`;
+        s[`--row-gap-y-${key}` as keyof Vars] = `calc(-1 * ${v.gapY} / 2)`;
+      }
+    }
+  });
   return s as StyleValue;
 });
 </script>
diff --git a/packages/opendesign/src/components/grid/__demo__/GridBasic.vue b/packages/opendesign/src/components/grid/__demo__/GridBasic.vue
index 110c0a0fb579db54762561b935c57648796c6f16..8f8c3bd329a4678669bab8967faad5c81827d928 100644
--- a/packages/opendesign/src/components/grid/__demo__/GridBasic.vue
+++ b/packages/opendesign/src/components/grid/__demo__/GridBasic.vue
@@ -37,6 +37,22 @@ import { ORow, OCol } from '../index';
         <div class="box">{{ item }}</div>
       </OCol>
     </ORow>
+    <br />
+    <ORow
+      gap-x="16px"
+      gap-y="16px"
+      wrap="wrap"
+      :xs="{ gapX: '4px', gapY: '4px' }"
+      :s="{ gapX: '8px', gapY: '8px' }"
+      :m="{ gapX: '16px', gapY: '16px' }"
+      :l="{ gapX: '24px', gapY: '24px' }"
+      :xl="{ gapX: '32px', gapY: '32px' }"
+      :xxl="{ gapX: '48px', gapY: '48px' }"
+    >
+      <OCol v-for="item in 10" :key="item" width="20%" class="colored">
+        <div class="box">{{ item }}</div>
+      </OCol>
+    </ORow>
   </div>
 </template>
 <style lang="scss">
diff --git a/packages/opendesign/src/components/grid/style/index.scss b/packages/opendesign/src/components/grid/style/index.scss
index 75691655b51c5b0856342f8dd2f1b26b8b7baf42..0a256ad67c739a970984fbde61e543e151927bd9 100644
--- a/packages/opendesign/src/components/grid/style/index.scss
+++ b/packages/opendesign/src/components/grid/style/index.scss
@@ -36,34 +36,94 @@ $media-xxl: 1920px;
   .o-col-xs {
     flex-basis: var(--col-basis-xs);
   }
+  .o-row {
+    margin-left: var(--row-gap-x-xs);
+    margin-right: var(--row-gap-x-xs);
+    margin-bottom: var(--row-gap-y-xs);
+  }
+  .o-col {
+    padding-left: var(--col-gap-x-xs);
+    padding-right: var(--col-gap-x-xs);
+    margin-bottom: var(--col-gap-y-xs);
+  }
 }
 
 @media (min-width: $media-s) {
   .o-col-s {
     flex-basis: var(--col-basis-s);
   }
+  .o-row {
+    margin-left: var(--row-gap-x-s);
+    margin-right: var(--row-gap-x-s);
+    margin-bottom: var(--row-gap-y-s);
+  }
+  .o-col {
+    padding-left: var(--col-gap-x-s);
+    padding-right: var(--col-gap-x-s);
+    margin-bottom: var(--col-gap-y-s);
+  }
 }
 
 @media (min-width: $media-m) {
   .o-col-m {
     flex-basis: var(--col-basis-m);
   }
+  .o-row {
+    margin-left: var(--row-gap-x-m);
+    margin-right: var(--row-gap-x-m);
+    margin-bottom: var(--row-gap-y-m);
+  }
+  .o-col {
+    padding-left: var(--col-gap-x-m);
+    padding-right: var(--col-gap-x-m);
+    margin-bottom: var(--col-gap-y-m);
+  }
 }
 
 @media (min-width: $media-l) {
   .o-col-l {
     flex-basis: var(--col-basis-l);
   }
+  .o-row {
+    margin-left: var(--row-gap-x-l);
+    margin-right: var(--row-gap-x-l);
+    margin-bottom: var(--row-gap-y-l);
+  }
+  .o-col {
+    padding-left: var(--col-gap-x-l);
+    padding-right: var(--col-gap-x-l);
+    margin-bottom: var(--col-gap-y-l);
+  }
 }
 
 @media (min-width: $media-xl) {
   .o-col-xl {
     flex-basis: var(--col-basis-xl);
   }
+  .o-row {
+    margin-left: var(--row-gap-x-xl);
+    margin-right: var(--row-gap-x-xl);
+    margin-bottom: var(--row-gap-y-xl);
+  }
+  .o-col {
+    padding-left: var(--col-gap-x-xl);
+    padding-right: var(--col-gap-x-xl);
+    margin-bottom: var(--col-gap-y-xl);
+  }
 }
 
 @media (min-width: $media-xxl) {
   .o-col-xxl {
     flex-basis: var(--col-basis-xxl);
   }
+  .o-row {
+    margin-left: var(--row-gap-x-xxl);
+    margin-right: var(--row-gap-x-xxl);
+    margin-bottom: var(--row-gap-y-xxl);
+  }
+  .o-col {
+    padding-left: var(--col-gap-x-xxl);
+    padding-right: var(--col-gap-x-xxl);
+    margin-bottom: var(--col-gap-y-xxl);
+  }
 }
diff --git a/packages/opendesign/src/components/grid/types.ts b/packages/opendesign/src/components/grid/types.ts
index 1a4c2a2fcf2e124554a3bded29a084bb31acbcda..ce9f06d3a001ec22f66bd3b8aa55878846fa2841 100644
--- a/packages/opendesign/src/components/grid/types.ts
+++ b/packages/opendesign/src/components/grid/types.ts
@@ -1,4 +1,13 @@
 import { ExtractPropTypes, PropType } from 'vue';
+export interface RowMediaT {
+  gapY: string;
+  gapX: string;
+}
+export interface ColMediaT {
+  width: string;
+}
+
+export const mediaSize = ['xs', 's', 'm', 'l', 'xl', 'xxl'];
 
 export const rowProps = {
   /**
@@ -43,6 +52,42 @@ export const rowProps = {
   gapY: {
     type: String,
   },
+  /**
+   * @media (min-width: 576px)
+   */
+  xs: {
+    type: Object as PropType<RowMediaT>,
+  },
+  /**
+   * @media (min-width: 721px)
+   */
+  s: {
+    type: Object as PropType<RowMediaT>,
+  },
+  /**
+   * @media (min-width: 1201px)
+   */
+  m: {
+    type: Object as PropType<RowMediaT>,
+  },
+  /**
+   * @media (min-width: 1441px)
+   */
+  l: {
+    type: Object as PropType<RowMediaT>,
+  },
+  /**
+   * @media (min-width: 1681px)
+   */
+  xl: {
+    type: Object as PropType<RowMediaT>,
+  },
+  /**
+   * @media (min-width: 1920px)
+   */
+  xxl: {
+    type: Object as PropType<RowMediaT>,
+  },
 };
 
 export const colProps = {
@@ -80,37 +125,37 @@ export const colProps = {
    * @media (min-width: 576px)
    */
   xs: {
-    type: Object,
+    type: Object as PropType<ColMediaT>,
   },
   /**
    * @media (min-width: 721px)
    */
   s: {
-    type: Object,
+    type: Object as PropType<ColMediaT>,
   },
   /**
    * @media (min-width: 1201px)
    */
   m: {
-    type: Object,
+    type: Object as PropType<ColMediaT>,
   },
   /**
    * @media (min-width: 1441px)
    */
   l: {
-    type: Object,
+    type: Object as PropType<ColMediaT>,
   },
   /**
    * @media (min-width: 1681px)
    */
   xl: {
-    type: Object,
+    type: Object as PropType<ColMediaT>,
   },
   /**
    * @media (min-width: 1920px)
    */
   xxl: {
-    type: Object,
+    type: Object as PropType<ColMediaT>,
   },
 };
 
diff --git a/packages/opendesign/src/components/select/OSelect.vue b/packages/opendesign/src/components/select/OSelect.vue
index 48f6e18de7e69f72267f3bb401b818358ae97f9d..2afc2448f602a05d88352f12aba57e8da82c459c 100644
--- a/packages/opendesign/src/components/select/OSelect.vue
+++ b/packages/opendesign/src/components/select/OSelect.vue
@@ -59,11 +59,13 @@ provide(selectOptionInjectKey, {
   },
 });
 
+const updateLabel = (label: string, isVisible: boolean = false) => {
+  activeLabel.value = label;
+  showOption.value = isVisible;
+};
+
 defineExpose({
-  updateLabel(label: string, isVisible: boolean = false) {
-    activeLabel.value = label;
-    showOption.value = isVisible;
-  },
+  updateLabel,
 });
 </script>
 <template>
diff --git a/packages/opendesign/src/components/slides/OSlides.vue b/packages/opendesign/src/components/slides/OSlides.vue
index 20038e9ddf58840554884e80393234b959bec9e6..34d898d56e3878b5be06af7fa803f537c9082045 100644
--- a/packages/opendesign/src/components/slides/OSlides.vue
+++ b/packages/opendesign/src/components/slides/OSlides.vue
@@ -144,8 +144,6 @@ const ininCarouselSlides = () => {
   }
 
   slideElList.value.forEach((el, idx) => {
-    const { clientWidth } = el;
-    el.style.left = `${clientWidth * idx}px`;
     el.addEventListener('click', () => {
       activeCarouselSlideByIndex(idx);
     });