documentation: fixed styling example for adding grid lines

Author: gmsa

website/docs/.vuepress/components/ExampleStylingGridLines.vue

@@ -90,18 +90,20 @@ export default {
 
 .grid::before {
     content: '';
-    background-size: calc(calc(100% - 10px) / 12) 40px;
-    margin: 6px;
+    background-size: calc(calc(100% - 5px) / 12) 40px;
     background-image: linear-gradient(
         to right,
         lightgrey 1px,
         transparent 1px
     ),
     linear-gradient(to bottom, lightgrey 1px, transparent 1px);
-    height: 100%;
-    width: 100%;
+    height: calc(100% - 5px);
+    width: calc(100% - 5px);
+    /*height: 100%;*/
+    /*width: 100%;*/
     position: absolute;
     background-repeat: repeat;
+    margin:5px;
 }
 
 .vue-grid-layout {

website/docs/guide/styling.md

@@ -52,24 +52,26 @@ To add grid lines to the layout, add the ``grid`` class to the grid-layout eleme
 ````css
 .grid::before {
     content: '';
-    background-size: calc(calc(100% - 12px) / 12) 112px;
+    background-size: calc(calc(100% - 5px) / 12) 40px;
     background-image: linear-gradient(
             to right,
             lightgrey 1px,
             transparent 1px
     ),
     linear-gradient(to bottom, lightgrey 1px, transparent 1px);
-    height: 100%;
-    width: 100%;
+    height: calc(100% - 5px);
+    width: calc(100% - 5px);
     position: absolute;
     background-repeat: repeat;
-    margin: 6px;
+    margin:5px;
 }
 ````
 
 CSS calculations for grid lines: 
 
-* background size: calc(calc(100% - margin) / colNum) rowHeight + margin;
+* background size = calc(calc(100% - (margin/2)) / colNum) rowHeight + margin;
+* height: calc(100% - (margin/2))
+* width: calc(100% - (margin/2))
 * margin: margin / 2
 
 [View source](https://github.com/jbaysolutions/vue-grid-layout/blob/master/website/docs/.vuepress/components/ExampleStylingGridLines.vue)