From 3a93d9abb362e61ac0b68efaba1e8efa7e653dc7 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 13 Aug 2019 16:23:44 +0100
Subject: [PATCH 1/8] add grid component

---
 src/system/components/layout/Grid/Grid.vue    | 44 +++++++++++++++++++
 .../components/layout/Grid/GridItem.vue       | 13 ++++++
 src/system/components/layout/Grid/demo.md     |  0
 src/system/components/layout/Grid/style.scss  |  3 ++
 4 files changed, 60 insertions(+)
 create mode 100644 src/system/components/layout/Grid/Grid.vue
 create mode 100644 src/system/components/layout/Grid/GridItem.vue
 create mode 100644 src/system/components/layout/Grid/demo.md
 create mode 100644 src/system/components/layout/Grid/style.scss

diff --git a/src/system/components/layout/Grid/Grid.vue b/src/system/components/layout/Grid/Grid.vue
new file mode 100644
index 000000000..4809221d5
--- /dev/null
+++ b/src/system/components/layout/Grid/Grid.vue
@@ -0,0 +1,44 @@
+<template>
+  <component
+    :is="tag"
+    class="ds-grid"
+    :style="styles"
+  >
+    <slot />
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'DsGrid',
+  props: {
+    gap: {
+      type: Number,
+      default: 16, // TODO: how to use tokens.small here?
+    },
+    minColumnWidth: {
+      type: Number,
+      default: 300,
+    },
+    rowHeight: {
+      type: Number,
+      default: 20,
+    },
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+  computed: {
+    styles() {
+      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" />
diff --git a/src/system/components/layout/Grid/GridItem.vue b/src/system/components/layout/Grid/GridItem.vue
new file mode 100644
index 000000000..1f3989e36
--- /dev/null
+++ b/src/system/components/layout/Grid/GridItem.vue
@@ -0,0 +1,13 @@
+<template>
+  <component :is="tag">
+    <slot />
+  </component>
+</template>
+
+<script>
+  export default {
+  name: 'DsGridItem',
+  }
+</script>
+
+<style/>
diff --git a/src/system/components/layout/Grid/demo.md b/src/system/components/layout/Grid/demo.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/system/components/layout/Grid/style.scss b/src/system/components/layout/Grid/style.scss
new file mode 100644
index 000000000..08069ea71
--- /dev/null
+++ b/src/system/components/layout/Grid/style.scss
@@ -0,0 +1,3 @@
+.ds-grid {
+  display: grid;
+}

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 2/8] 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/>

From b730b91e2c6546b60605e8835a9b8f958cf70afb Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 13 Aug 2019 17:54:17 +0100
Subject: [PATCH 3/8] set placeholder height to 100%

---
 src/system/components/layout/Placeholder/style.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/system/components/layout/Placeholder/style.scss b/src/system/components/layout/Placeholder/style.scss
index 15a71232e..67cc1fefa 100644
--- a/src/system/components/layout/Placeholder/style.scss
+++ b/src/system/components/layout/Placeholder/style.scss
@@ -1,5 +1,6 @@
 .ds-placeholder {
   @include reset;
+  height: 100%;
   padding: $space-base;
   display: flex;
   align-items: center;
@@ -10,4 +11,4 @@
   @media #{$media-query-medium} {
     padding: $space-x-large 0;
   }
-}
\ No newline at end of file
+}

From f51890a54fe75d480a1597ac12d1d4865ea770e8 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 13 Aug 2019 18:58:28 +0100
Subject: [PATCH 4/8] adjust default values, add docs

---
 src/system/components/layout/Grid/Grid.vue    |  7 +-
 .../components/layout/Grid/GridItem.vue       |  2 +-
 src/system/components/layout/Grid/demo.md     | 74 +++++++++++++++++++
 3 files changed, 81 insertions(+), 2 deletions(-)

diff --git a/src/system/components/layout/Grid/Grid.vue b/src/system/components/layout/Grid/Grid.vue
index bc12b116d..541b0f0d4 100644
--- a/src/system/components/layout/Grid/Grid.vue
+++ b/src/system/components/layout/Grid/Grid.vue
@@ -9,6 +9,11 @@
 </template>
 
 <script>
+/**
+ * Used in combination with the grid item component to create masonry layouts.
+ * @version 1.0.0
+ */
+
 export default {
   name: 'DsGrid',
   props: {
@@ -18,7 +23,7 @@ export default {
     },
     minColumnWidth: {
       type: Number,
-      default: 300,
+      default: 250,
     },
     rowHeight: {
       type: Number,
diff --git a/src/system/components/layout/Grid/GridItem.vue b/src/system/components/layout/Grid/GridItem.vue
index 857ed1238..db05aa3fd 100644
--- a/src/system/components/layout/Grid/GridItem.vue
+++ b/src/system/components/layout/Grid/GridItem.vue
@@ -17,7 +17,7 @@
       },
       rowSpan: {
         type: Number,
-        default: 10,
+        default: 4,
       },
       tag: {
         type: String,
diff --git a/src/system/components/layout/Grid/demo.md b/src/system/components/layout/Grid/demo.md
index e69de29bb..103ed38b3 100644
--- a/src/system/components/layout/Grid/demo.md
+++ b/src/system/components/layout/Grid/demo.md
@@ -0,0 +1,74 @@
+## Column Widths
+
+All columns share the space in the grid evenly. You can set a minimum width beyond which columns will continue to grow until there is enough space to fit another column of minimum width. (Resize the window to see the effect.)
+```
+<ds-grid min-column-width="200">
+  <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
+  <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
+  <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
+  <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
+</ds-grid>
+```
+
+## Gaps
+
+You can set a gap which will be applied as a vertical and horizontal space between all grid items.
+```
+<ds-grid gap="30">
+  <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
+  <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
+  <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
+  <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
+</ds-grid>
+```
+
+## Grid Item Size
+
+Once the grid is defined a grid item can span several columns and/or rows. You can adjust this by setting the column span and/or row span of each item individually. The column span can also be set to `'fullWidth'`.
+```
+<ds-grid>
+  <ds-grid-item column-span="fullWidth"><ds-placeholder>full width</ds-placeholder></ds-grid-item>
+  <ds-grid-item row-span="6" column-span="2"><ds-placeholder>2 columns, 6 rows</ds-placeholder></ds-grid-item>
+  <ds-grid-item row-span="8"><ds-placeholder>8 rows</ds-placeholder></ds-grid-item>
+  <ds-grid-item><ds-placeholder>default</ds-placeholder></ds-grid-item>
+</ds-grid>
+```
+
+## Row Height
+
+You can set a row height – but this is only recommended in combination with the grid item property `row-span`! With these values you can fine tune the height of grid items which will always be a multiple of the defined row height.
+
+Low row heights leads to a more flexible item height:
+```
+<ds-grid row-height="4">
+  <ds-grid-item row-span="10"><ds-placeholder>same</ds-placeholder></ds-grid-item>
+  <ds-grid-item row-span="11"><ds-placeholder>same</ds-placeholder></ds-grid-item>
+  <ds-grid-item row-span="12"><ds-placeholder>same</ds-placeholder></ds-grid-item>
+</ds-grid>
+```
+
+High row height leads to a less flexible item height:
+```
+<ds-grid row-height="100">
+  <ds-grid-item row-span="1"><ds-placeholder>same</ds-placeholder></ds-grid-item>
+  <ds-grid-item row-span="2"><ds-placeholder>same</ds-placeholder></ds-grid-item>
+  <ds-grid-item row-span="3"><ds-placeholder>same</ds-placeholder></ds-grid-item>
+</ds-grid>
+```
+
+## Masonry Layout
+
+In a classic masonry layout items usually have the same width but different heights and are sorted from left to right then top to bottom. You can achieve this by setting the `min-column-width` and `gap` properties for the grid (or using the defaults) and then calculating the `row-span` for each grid item depending on its contents.
+
+Some items may move slightly out of order to make sure existing rows are filled before creating new ones.
+```
+<ds-grid>
+  <ds-grid-item row-span="4"><ds-placeholder>first</ds-placeholder></ds-grid-item>
+  <ds-grid-item row-span="8"><ds-placeholder>second</ds-placeholder></ds-grid-item>
+  <ds-grid-item row-span="6"><ds-placeholder>third</ds-placeholder></ds-grid-item>
+  <ds-grid-item row-span="6"><ds-placeholder>fourth</ds-placeholder></ds-grid-item>
+  <ds-grid-item row-span="4"><ds-placeholder>fifth</ds-placeholder></ds-grid-item>
+  <ds-grid-item row-span="8"><ds-placeholder>sixth</ds-placeholder></ds-grid-item>
+  <ds-grid-item row-span="4"><ds-placeholder>seventh</ds-placeholder></ds-grid-item>
+</ds-grid>
+```

From 4edb8cd541a95b69bdd3a750dfd5c95053fcc0c8 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 13 Aug 2019 19:08:27 +0100
Subject: [PATCH 5/8] add grid item to grid docs

---
 src/system/components/layout/Grid/Grid.vue    | 12 ++++
 .../components/layout/Grid/GridItem.vue       | 62 ++++++++++++-------
 2 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/src/system/components/layout/Grid/Grid.vue b/src/system/components/layout/Grid/Grid.vue
index 541b0f0d4..aca142682 100644
--- a/src/system/components/layout/Grid/Grid.vue
+++ b/src/system/components/layout/Grid/Grid.vue
@@ -17,18 +17,30 @@
 export default {
   name: 'DsGrid',
   props: {
+    /**
+     * The vertical and horizontal gap between grid items
+     */
     gap: {
       type: Number,
       default: 16, // TODO: how to use tokens.small here?
     },
+    /**
+     * The minimum width of each column
+     */
     minColumnWidth: {
       type: Number,
       default: 250,
     },
+    /**
+     * The height of each row (recommended to use the default)
+     */
     rowHeight: {
       type: Number,
       default: 20,
     },
+    /**
+     * The outermost html tag
+     */
     tag: {
       type: String,
       default: 'div',
diff --git a/src/system/components/layout/Grid/GridItem.vue b/src/system/components/layout/Grid/GridItem.vue
index db05aa3fd..3fc0eae2e 100644
--- a/src/system/components/layout/Grid/GridItem.vue
+++ b/src/system/components/layout/Grid/GridItem.vue
@@ -8,30 +8,44 @@
 </template>
 
 <script>
-  export default {
-    name: 'DsGridItem',
-    props: {
-      columnSpan: {
-        type: [String, Number],
-        default: 1,
-      },
-      rowSpan: {
-        type: Number,
-        default: 4,
-      },
-      tag: {
-        type: String,
-        default: 'div',
-      },
+/**
+ * @version 1.0.0
+ * @see DsGrid
+ */
+export default {
+  name: 'DsGridItem',
+  props: {
+    /**
+     * The number of columns the item will span
+     * @options 'fullWidth'|number
+     */
+    columnSpan: {
+      type: [String, Number],
+      default: 1,
     },
-    computed: {
-      styles() {
-        return {
-          gridRowEnd: `span ${this.rowSpan}`,
-          gridColumnStart: this.columnSpan === 'fullWidth' ? 1 : 'auto',
-          gridColumnEnd: this.columnSpan === 'fullWidth' ? -1 : `span ${this.columnSpan}`,
-        }
+    /**
+     * The number of rows the item will span
+     */
+    rowSpan: {
+      type: Number,
+      default: 4,
+    },
+    /**
+     * The outermost html tag
+     */
+    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>

From 3fa3d6f5c4c1a94ae624cd572463a8d09b418ce1 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 14 Aug 2019 12:28:17 +0100
Subject: [PATCH 6/8] use design tokens for grid gap

---
 src/system/components/layout/Grid/Grid.vue |  8 +++++---
 src/system/components/layout/Grid/demo.md  | 20 +++++++++++---------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/system/components/layout/Grid/Grid.vue b/src/system/components/layout/Grid/Grid.vue
index aca142682..e13fa8f59 100644
--- a/src/system/components/layout/Grid/Grid.vue
+++ b/src/system/components/layout/Grid/Grid.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import { getSpace } from '@@/utils'
+
 /**
  * Used in combination with the grid item component to create masonry layouts.
  * @version 1.0.0
@@ -21,8 +23,8 @@ export default {
      * The vertical and horizontal gap between grid items
      */
     gap: {
-      type: Number,
-      default: 16, // TODO: how to use tokens.small here?
+      type: String,
+      default: 'small',
     },
     /**
      * The minimum width of each column
@@ -50,7 +52,7 @@ export default {
     styles() {
       return {
         gridTemplateColumns: `repeat(auto-fill, minmax(${this.minColumnWidth}px, 1fr`,
-        gridGap: `${this.gap}px`,
+        gridGap: `${getSpace(this.gap)}px`,
         gridAutoRows: `${this.rowHeight}px`,
       }
     }
diff --git a/src/system/components/layout/Grid/demo.md b/src/system/components/layout/Grid/demo.md
index 103ed38b3..fadbf1eb7 100644
--- a/src/system/components/layout/Grid/demo.md
+++ b/src/system/components/layout/Grid/demo.md
@@ -1,6 +1,8 @@
-## Column Widths
+## Column Width
 
-All columns share the space in the grid evenly. You can set a minimum width beyond which columns will continue to grow until there is enough space to fit another column of minimum width. (Resize the window to see the effect.)
+All columns share the space in the grid evenly and grow and shrink dynamically.
+
+You can set a minimum width beyond which columns will continue to grow until there is enough space to fit another column of minimum width. (Resize the window to see the effect.)
 ```
 <ds-grid min-column-width="200">
   <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
@@ -12,9 +14,9 @@ All columns share the space in the grid evenly. You can set a minimum width beyo
 
 ## Gaps
 
-You can set a gap which will be applied as a vertical and horizontal space between all grid items.
+You can set a gap which will be applied as a vertical and horizontal space between all grid items. Allowed values are [the common space sizes](/design-tokens/#spaceSize) and `0`. The default is `small`.
 ```
-<ds-grid gap="30">
+<ds-grid gap="x-small">
   <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
   <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
   <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
@@ -30,15 +32,15 @@ Once the grid is defined a grid item can span several columns and/or rows. You c
   <ds-grid-item column-span="fullWidth"><ds-placeholder>full width</ds-placeholder></ds-grid-item>
   <ds-grid-item row-span="6" column-span="2"><ds-placeholder>2 columns, 6 rows</ds-placeholder></ds-grid-item>
   <ds-grid-item row-span="8"><ds-placeholder>8 rows</ds-placeholder></ds-grid-item>
-  <ds-grid-item><ds-placeholder>default</ds-placeholder></ds-grid-item>
+  <ds-grid-item><ds-placeholder>default (1 column, 4 rows)</ds-placeholder></ds-grid-item>
 </ds-grid>
 ```
 
 ## Row Height
 
-You can set a row height – but this is only recommended in combination with the grid item property `row-span`! With these values you can fine tune the height of grid items which will always be a multiple of the defined row height.
+You can set the height of a row – but this is only recommended in combination with setting the grid item property `row-span`! With these values you can fine tune the height of grid items which will always be a multiple of the defined `row-height`.
 
-Low row heights leads to a more flexible item height:
+Low row height leads to a more fine-grained item height:
 ```
 <ds-grid row-height="4">
   <ds-grid-item row-span="10"><ds-placeholder>same</ds-placeholder></ds-grid-item>
@@ -47,7 +49,7 @@ Low row heights leads to a more flexible item height:
 </ds-grid>
 ```
 
-High row height leads to a less flexible item height:
+High row height leads to a rougher item height:
 ```
 <ds-grid row-height="100">
   <ds-grid-item row-span="1"><ds-placeholder>same</ds-placeholder></ds-grid-item>
@@ -58,7 +60,7 @@ High row height leads to a less flexible item height:
 
 ## Masonry Layout
 
-In a classic masonry layout items usually have the same width but different heights and are sorted from left to right then top to bottom. You can achieve this by setting the `min-column-width` and `gap` properties for the grid (or using the defaults) and then calculating the `row-span` for each grid item depending on its contents.
+In a classic masonry layout items usually have the same width but different heights and are sorted from left to right then top to bottom. You can achieve this by calculating and setting the `row-span` programmatically for each grid item, depending on its contents.
 
 Some items may move slightly out of order to make sure existing rows are filled before creating new ones.
 ```

From 3f4a8a543e88d53698b14e3a53a764bee6fd1d7b Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 14 Aug 2019 15:22:08 +0100
Subject: [PATCH 7/8] pass numbers as numbers

---
 src/system/components/layout/Grid/demo.md | 38 ++++++++++++-----------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/system/components/layout/Grid/demo.md b/src/system/components/layout/Grid/demo.md
index fadbf1eb7..9bdbc189f 100644
--- a/src/system/components/layout/Grid/demo.md
+++ b/src/system/components/layout/Grid/demo.md
@@ -4,7 +4,7 @@ All columns share the space in the grid evenly and grow and shrink dynamically.
 
 You can set a minimum width beyond which columns will continue to grow until there is enough space to fit another column of minimum width. (Resize the window to see the effect.)
 ```
-<ds-grid min-column-width="200">
+<ds-grid :min-column-width="200">
   <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
   <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
   <ds-grid-item><ds-placeholder>same</ds-placeholder></ds-grid-item>
@@ -30,8 +30,8 @@ Once the grid is defined a grid item can span several columns and/or rows. You c
 ```
 <ds-grid>
   <ds-grid-item column-span="fullWidth"><ds-placeholder>full width</ds-placeholder></ds-grid-item>
-  <ds-grid-item row-span="6" column-span="2"><ds-placeholder>2 columns, 6 rows</ds-placeholder></ds-grid-item>
-  <ds-grid-item row-span="8"><ds-placeholder>8 rows</ds-placeholder></ds-grid-item>
+  <ds-grid-item :row-span="6" :column-span="2"><ds-placeholder>2 columns, 6 rows</ds-placeholder></ds-grid-item>
+  <ds-grid-item :row-span="8"><ds-placeholder>8 rows</ds-placeholder></ds-grid-item>
   <ds-grid-item><ds-placeholder>default (1 column, 4 rows)</ds-placeholder></ds-grid-item>
 </ds-grid>
 ```
@@ -42,19 +42,19 @@ You can set the height of a row – but this is only recommended in combination
 
 Low row height leads to a more fine-grained item height:
 ```
-<ds-grid row-height="4">
-  <ds-grid-item row-span="10"><ds-placeholder>same</ds-placeholder></ds-grid-item>
-  <ds-grid-item row-span="11"><ds-placeholder>same</ds-placeholder></ds-grid-item>
-  <ds-grid-item row-span="12"><ds-placeholder>same</ds-placeholder></ds-grid-item>
+<ds-grid :row-height="4">
+  <ds-grid-item :row-span="10"><ds-placeholder>same</ds-placeholder></ds-grid-item>
+  <ds-grid-item :row-span="11"><ds-placeholder>same</ds-placeholder></ds-grid-item>
+  <ds-grid-item :row-span="12"><ds-placeholder>same</ds-placeholder></ds-grid-item>
 </ds-grid>
 ```
 
 High row height leads to a rougher item height:
 ```
-<ds-grid row-height="100">
-  <ds-grid-item row-span="1"><ds-placeholder>same</ds-placeholder></ds-grid-item>
-  <ds-grid-item row-span="2"><ds-placeholder>same</ds-placeholder></ds-grid-item>
-  <ds-grid-item row-span="3"><ds-placeholder>same</ds-placeholder></ds-grid-item>
+<ds-grid :row-height="100">
+  <ds-grid-item :row-span="1"><ds-placeholder>same</ds-placeholder></ds-grid-item>
+  <ds-grid-item :row-span="2"><ds-placeholder>same</ds-placeholder></ds-grid-item>
+  <ds-grid-item :row-span="3"><ds-placeholder>same</ds-placeholder></ds-grid-item>
 </ds-grid>
 ```
 
@@ -65,12 +65,14 @@ In a classic masonry layout items usually have the same width but different heig
 Some items may move slightly out of order to make sure existing rows are filled before creating new ones.
 ```
 <ds-grid>
-  <ds-grid-item row-span="4"><ds-placeholder>first</ds-placeholder></ds-grid-item>
-  <ds-grid-item row-span="8"><ds-placeholder>second</ds-placeholder></ds-grid-item>
-  <ds-grid-item row-span="6"><ds-placeholder>third</ds-placeholder></ds-grid-item>
-  <ds-grid-item row-span="6"><ds-placeholder>fourth</ds-placeholder></ds-grid-item>
-  <ds-grid-item row-span="4"><ds-placeholder>fifth</ds-placeholder></ds-grid-item>
-  <ds-grid-item row-span="8"><ds-placeholder>sixth</ds-placeholder></ds-grid-item>
-  <ds-grid-item row-span="4"><ds-placeholder>seventh</ds-placeholder></ds-grid-item>
+  <ds-grid-item :row-span="4"><ds-placeholder>first</ds-placeholder></ds-grid-item>
+  <ds-grid-item :row-span="8"><ds-placeholder>second</ds-placeholder></ds-grid-item>
+  <ds-grid-item :row-span="6"><ds-placeholder>third</ds-placeholder></ds-grid-item>
+  <ds-grid-item :row-span="6"><ds-placeholder>fourth</ds-placeholder></ds-grid-item>
+  <ds-grid-item :row-span="4"><ds-placeholder>fifth</ds-placeholder></ds-grid-item>
+  <ds-grid-item :row-span="8"><ds-placeholder>sixth</ds-placeholder></ds-grid-item>
+  <ds-grid-item :row-span="4"><ds-placeholder>seventh</ds-placeholder></ds-grid-item>
 </ds-grid>
 ```
+
+**Hint:** Make sure to pass `numbers` with a colon (shortcut for `v-bind:`) so they are not interpreted as strings. For a more thorough explanation visit [the Vue.js docs](https://vuejs.org/v2/guide/components-props.html#Passing-a-Number).

From df7b736f5d7234d620926269e134fd4f94da5d67 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Wed, 14 Aug 2019 15:29:48 +0100
Subject: [PATCH 8/8] add validator function for grid gap

---
 src/system/components/layout/Grid/Grid.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/system/components/layout/Grid/Grid.vue b/src/system/components/layout/Grid/Grid.vue
index e13fa8f59..6f2cc0c08 100644
--- a/src/system/components/layout/Grid/Grid.vue
+++ b/src/system/components/layout/Grid/Grid.vue
@@ -21,10 +21,14 @@ export default {
   props: {
     /**
      * The vertical and horizontal gap between grid items
+     * @options xxx-small|xx-small|x-small|small|base|large|x-large|xx-large|xxx-large
      */
     gap: {
       type: String,
       default: 'small',
+      validator: value => (
+        value.match(/(xxx-small|xx-small|x-small|small|base|large|x-large|xx-large|xxx-large)/)
+      )
     },
     /**
      * The minimum width of each column