From 2ccaeb6166a1965dc1c4b9107096bafc74c19f05 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 13 Aug 2019 17:34:35 +0100
Subject: [PATCH] add grid item component

---
 src/system/components/layout/Grid/Grid.vue    | 11 ++++---
 .../components/layout/Grid/GridItem.vue       | 32 ++++++++++++++++---
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/system/components/layout/Grid/Grid.vue b/src/system/components/layout/Grid/Grid.vue
index 4809221d5..bc12b116d 100644
--- a/src/system/components/layout/Grid/Grid.vue
+++ b/src/system/components/layout/Grid/Grid.vue
@@ -31,14 +31,17 @@ export default {
   },
   computed: {
     styles() {
-      return ({
+      return {
         gridTemplateColumns: `repeat(auto-fill, minmax(${this.minColumnWidth}px, 1fr`,
         gridGap: `${this.gap}px`,
         gridAutoRows: `${this.rowHeight}px`,
-      })
+      }
     }
-  }
+  },
 }
 </script>
 
-<style lang="scss" src="./style.scss" />
+<style lang="scss" src="./style.scss">
+</style>
+
+<docs src="./demo.md"></docs>
diff --git a/src/system/components/layout/Grid/GridItem.vue b/src/system/components/layout/Grid/GridItem.vue
index 1f3989e36..857ed1238 100644
--- a/src/system/components/layout/Grid/GridItem.vue
+++ b/src/system/components/layout/Grid/GridItem.vue
@@ -1,13 +1,37 @@
 <template>
-  <component :is="tag">
+  <component
+    :is="tag"
+    :style="styles"
+  >
     <slot />
   </component>
 </template>
 
 <script>
   export default {
-  name: 'DsGridItem',
+    name: 'DsGridItem',
+    props: {
+      columnSpan: {
+        type: [String, Number],
+        default: 1,
+      },
+      rowSpan: {
+        type: Number,
+        default: 10,
+      },
+      tag: {
+        type: String,
+        default: 'div',
+      },
+    },
+    computed: {
+      styles() {
+        return {
+          gridRowEnd: `span ${this.rowSpan}`,
+          gridColumnStart: this.columnSpan === 'fullWidth' ? 1 : 'auto',
+          gridColumnEnd: this.columnSpan === 'fullWidth' ? -1 : `span ${this.columnSpan}`,
+        }
+      }
+    },
   }
 </script>
-
-<style/>