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] 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>
+```