diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index 3034c0238583b171b6acecab7e96579da84bb701..4c382da797b8eba9a6d9f02ada697aef1bf20709 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opensig/opendesign",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "es/index.d.ts",
diff --git a/packages/opendesign/src/components/grid/ORow.vue b/packages/opendesign/src/components/grid/ORow.vue
index ff5dd2503ec3c4b2f4d1765357f72a33cc3fd97c..0f1a1d5c39d5da809080c285a3dabe894c6e4224 100644
--- a/packages/opendesign/src/components/grid/ORow.vue
+++ b/packages/opendesign/src/components/grid/ORow.vue
@@ -78,7 +78,18 @@ const style = computed(() => {
 });
 </script>
 <template>
-  <div class="o-row" :style="style">
+  <div
+    class="o-row"
+    :style="style"
+    :class="{
+      'o-row-xs': !!props.xs,
+      'o-row-s': !!props.s,
+      'o-row-m': !!props.m,
+      'o-row-l': !!props.l,
+      'o-row-xl': !!props.xl,
+      'o-row-xxl': !!props.xxl,
+    }"
+  >
     <slot></slot>
   </div>
 </template>
diff --git a/packages/opendesign/src/components/grid/style/index.scss b/packages/opendesign/src/components/grid/style/index.scss
index 0a256ad67c739a970984fbde61e543e151927bd9..cb3250445d5f0d8944a6fa58eb7c3e8b6f688874 100644
--- a/packages/opendesign/src/components/grid/style/index.scss
+++ b/packages/opendesign/src/components/grid/style/index.scss
@@ -36,15 +36,15 @@ $media-xxl: 1920px;
   .o-col-xs {
     flex-basis: var(--col-basis-xs);
   }
-  .o-row {
+  .o-row-xs {
     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);
+    .o-col {
+      padding-left: var(--col-gap-x-xs);
+      padding-right: var(--col-gap-x-xs);
+      margin-bottom: var(--col-gap-y-xs);
+    }
   }
 }
 
@@ -52,15 +52,15 @@ $media-xxl: 1920px;
   .o-col-s {
     flex-basis: var(--col-basis-s);
   }
-  .o-row {
+  .o-row-xs {
     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);
+    .o-col {
+      padding-left: var(--col-gap-x-s);
+      padding-right: var(--col-gap-x-s);
+      margin-bottom: var(--col-gap-y-s);
+    }
   }
 }
 
@@ -68,15 +68,15 @@ $media-xxl: 1920px;
   .o-col-m {
     flex-basis: var(--col-basis-m);
   }
-  .o-row {
+  .o-row-m {
     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);
+    .o-col {
+      padding-left: var(--col-gap-x-m);
+      padding-right: var(--col-gap-x-m);
+      margin-bottom: var(--col-gap-y-m);
+    }
   }
 }
 
@@ -84,15 +84,15 @@ $media-xxl: 1920px;
   .o-col-l {
     flex-basis: var(--col-basis-l);
   }
-  .o-row {
+  .o-row-l {
     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);
+    .o-col {
+      padding-left: var(--col-gap-x-l);
+      padding-right: var(--col-gap-x-l);
+      margin-bottom: var(--col-gap-y-l);
+    }
   }
 }
 
@@ -100,15 +100,15 @@ $media-xxl: 1920px;
   .o-col-xl {
     flex-basis: var(--col-basis-xl);
   }
-  .o-row {
+  .o-row-xl {
     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);
+    .o-col {
+      padding-left: var(--col-gap-x-xl);
+      padding-right: var(--col-gap-x-xl);
+      margin-bottom: var(--col-gap-y-xl);
+    }
   }
 }
 
@@ -116,14 +116,14 @@ $media-xxl: 1920px;
   .o-col-xxl {
     flex-basis: var(--col-basis-xxl);
   }
-  .o-row {
+  .o-row-xxl {
     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);
+    .o-col {
+      padding-left: var(--col-gap-x-xxl);
+      padding-right: var(--col-gap-x-xxl);
+      margin-bottom: var(--col-gap-y-xxl);
+    }
   }
 }