GridContainer.vue

<template functional>
  <div
    class="container"
    :class="{
      row: props.flexRow,
      column: props.flexColumn,
      wrap: props.flexWrap,
      'justify-content-start': props.justifyContentStart,
      'justify-content-center': props.justifyContentCenter,
      'justify-content-end': props.justifyContentEnd,
      'align-items-start': props.alignItemsStart,
      'align-items-center': props.alignItemsCenter,
      'align-items-end': props.alignItemsEnd,
    }"
    :style="{ ...props.styles }"
  >
    <slot />
  </div>
</template>

<style lang="scss" scoped>
.container { display: flex }
.justify-content-start { justify-content: flex-start }
.justify-content-center { justify-content: center }
.justify-content-end { justify-content: flex-end }
.align-items-start { align-items: flex-start }
.align-items-center { justify-content: center }
.align-items-end { justify-content: flex-end }
.row { flex-direction: row }
.column { flex-direction: column }
.wrap { flex-wrap: wrap }
</style>