Simple Vue Grid Components

by Anurak Sumranphan

HTML

<div id="app">
  <v-container
    gutter="8"
  >
    <v-row>
      <v-column>
        Column 1
      </v-column>
      <v-column>
        Column 2
      </v-column>
    </v-row>
  </v-container>
</div>

CSS

body {
  background: #1c2128;
  padding: 20px;
  font-family: Helvetica, sans-serif;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

Vue.component('v-container', {
  props: {
  	gutter: String | Number
  },

  computed: {
    styles: function () {
      return ''
    }
  },

  render: function (createElement) {
    return createElement('div', {
    	class: 'v-container',
      style: this.styles
    }, this.$slots.default)
  }
})

Vue.component('v-row', {
  props: {
    offset: 2
  },
  
  render: function (h) {
    return h('div', {
    	class: 'v-row'
    }, this.$slots.default)
  }
})

Vue.component('v-column', {
  props: {
    offset: 2
  },
  
  render: function (h) {
    return h('div', {
    	class: 'v-column'
    }, this.$slots.default)
  }
})

new Vue({
  el:"#app"
})