Implement content alignment

Author: manico

dist/lib/vue-gridlayout.min.js

@@ -39,6 +39,19 @@
         Centered
       </v-grid-item>
     </v-grid>
+    <!-- Align content -->
+    <v-grid class="grid grid-d"
+            :template-columns="[{ repeat: { count: 3, value: '100px' } }]"
+            :template-rows="[{ repeat: { count: 3, value: '100px' } }]"
+            :template-areas="['a a b', 'a a b', 'c d d']"
+            gap="10px"
+            align-content="space-between"
+            justify-content="space-around">
+      <v-grid-item area="a"></v-grid-item>
+      <v-grid-item area="b"></v-grid-item>
+      <v-grid-item area="c"></v-grid-item>
+      <v-grid-item area="d"></v-grid-item>
+    </v-grid>
   </div>
 </template>
 

dist/lib/vue-gridlayout.min.js.map

@@ -1,5 +1,6 @@
 import { isObject } from '../../util';
 import alignmentItemValues from '../../validation/alignmentItemValues';
+import alignmentContentValues from '../../validation/alignmentContentValues';
 
 const resolveAreas = (input) => {
   let output;
@@ -60,6 +61,12 @@ const resolveSize = (input, isRepeatable, isNameable) => {
 export default {
   name: 'v-grid',
   props: {
+    alignContent: {
+      type: String,
+      validator(value) {
+        return alignmentContentValues.indexOf(value) > -1;
+      },
+    },
     alignItems: {
       type: String,
       validator(value) {
@@ -78,6 +85,12 @@ export default {
     gap: {
       type: [String, Array],
     },
+    justifyContent: {
+      type: String,
+      validator(value) {
+        return alignmentContentValues.indexOf(value) > -1;
+      },
+    },
     justifyItems: {
       type: String,
       validator(value) {
@@ -130,6 +143,8 @@ export default {
   render(h) {
     return h('div', {
       style: {
+        alignContent: this.alignContent,
+        justifyContent: this.justifyContent,
         alignItems: this.alignItems,
         justifyItems: this.justifyItems,
         display: 'grid',

src/App.vue

@@ -12,3 +12,9 @@ html
     &-c div
       background: yellow
       padding: 1em
+    &-d
+      height: 500px
+      width: 500px
+      div
+        background: blue
+      

src/components/VGrid/VGrid.js

@@ -0,0 +1,13 @@
+export default [
+  'normal',
+  'start',
+  'end',
+  'center',
+  'stretch',
+  'space-around',
+  'space-between',
+  'space-evenly',
+  'baseline',
+  'first baseline',
+  'last baseline',
+];