Vue Grid Example

cell.vue

<template>
  <div class="cell">
    <slot></slot>
  </div>
</template>

<style lang="scss">
@import "~assets/mixins.scss"

.cell {
  align-self: stretch;
  justify-self: stretch;
  flex: 1;
  @media (max-width: $mobile-breakpoint-small) {
    flex: 1 0 100%;
    max-width 100%;
  }
}
</style>

grid.vue

<template>
  <div class="grid">
    <slot></slot>
  </div>
</template>

<style lang="scss">
@import "~assets/mixins.scss";

.grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-self: stretch;
  width: 100%;
  height: 100%;
}
</style>

row.vue

<template>
  <div class="row">
    <slot></slot>
  </div>
</template>

<style lang="scss">
@import "~assets/mixins.scss";

.row {
  display: flex;
  flex-wrap: wrap;
  flex: 1 0 100%;
  position: relative;
}
</style>

usage.vue

<template>
  <!-- Grids can be nested, rows are used as breakpoints for cells, and cells automatically wrap based on the media query specified in cell.vue (an opinionated implementation that you may not need depending on your use case). You can also add custom classes to any grid / row / cell component to override the styles based on your specific implementation use case -->
  <grid>
    <!-- Only has three cells, wraps based on media query in cell.vue -->
    <row>
      <cell>Row One Cell One</cell>
      <cell>Row One Cell Two</cell>
      <cell>Row One Cell Three</cell>
    </row>

    <!-- Only has two cells, wraps based on media query in cell.vue -->
    <row>
      <cell>Row Two Cell One</cell>
      <cell>Row Two Cell Two</cell>
      <cell>
        <grid>
          <row>
            <cell>Row Two Nested Row One Cell One</cell>
            <cell>Row Two Nested Row One Cell Two</cell>
          </row>
          <row>
            <cell>Row Two Nested Row Two Cell One</cell>
            <cell>Row Two Nested Row Two Cell Two</cell>
            <cell>Row Two Nested Row Two Cell Three</cell>
          </row>
        </grid>
      </cell>
    </row>

    <!-- Only has one cell, wraps based on media query in cell.vue --> 
    <row>
      <cell>Row Three Cell One</cell>
    </row>
  </grid>
</template>