Columns.vue

<script>
export default {
  props: {
    span: {
      type: String,
      default: null
    }
  },
  render: function (createElement) {
    return createElement(
      'div',
      {
        attrs: {
          span: this.span
        }
      },
      this.$slots.default
    )
  }
}
</script>

<style lang="postcss" scoped>
div {
  --grid-cs: 1; /* start */
  --grid-ce: -1; /* end */
}
[columns] > [span] {
  display: block;
  appearance: none;
}

/* span=start... */
@for $x from 1 to 16 {
  [span^="$(x)"] { --grid-cs: $(x) }
}

/* span=...+width, span=...-end */
@for $x from 1 to 16 {
  @if $x == 1 {
    [columns] > [span$="+1"],
    [columns] > [span="1"] {
      --grid-ce: 1;
    }
  } @else {
    [columns] > [span$="+$(x)"],
    [columns] > [span$="calc(-$(x)+1)"],
    [columns] > [span="$(x)"] {
      --grid-ce: $(x);
    }
  }
  @if $x == 16 {
    [columns] > [span$="-16"] { --grid-ce: 17; }
  }
}

/* connect vars */
[columns] > [span] { grid-column-end: span var(--grid-ce); }
[columns] > [span*="+"],
[columns] > [span*="-"],
[columns] > [span*=".."] {
  grid-column-start: var(--grid-cs);
}
[columns] > [span*="-"],
[columns] > [span*=".."] {
  grid-column-end: var(--grid-ce);
}
[columns] > [span="row"] { grid-column: 1 / -1; }
</style>

Grid.vue

<script>
export default {
  props: {
    columns: {
      type: String,
      default: '1'
    }
  },
  render: function (createElement) {
    return createElement(
      'div',
      {
        attrs: {
          columns: this.columns
        }
      },
      this.$slots.default
    )
  }
}
</script>

<style lang="postcss" scoped>
[columns] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  --grid-cs: 1; /* start */
  --grid-ce: -1; /* end */
}

@for $x from 2 to 16 {
  [columns="$(x)"] {
    grid-template-columns: repeat($(x), 1fr)
  }
}

/* .debug can be added to a grid to visualize its effective cells */
[debug] > * {
  --color: rgba(248,110,91 ,0.3);
  background-image: linear-gradient(to bottom, var(--color) 0%, var(--color) 100%);
}

[debug] > :nth-child(6n+2) { --color: rgba(103,126,208,0.3) }
[debug] > :nth-child(6n+3) { --color: rgba(224,174,72 ,0.3) }
[debug] > :nth-child(6n+4) { --color: rgba(77, 214,115,0.3) }
[debug] > :nth-child(6n+5) { --color: rgba(217,103,219,0.3) }
[debug] > :nth-child(6n+6) { --color: rgba(94, 204,211,0.3) }
[debug] > :nth-child(6n+7) { --color: rgba(248,110,91 ,0.3) }
</style>

Demo

The number of columns a grid has is specified with the columns attribute. For instance, to define a grid with 8 columns, you'd write:
<Grid columns="8">.

The span attribute is used to customize where a column starts and how many columns it spans. For example, <Columns span="2-5"> starts at column 2 and ends in column 5. A cell with an empty or missing span attribute starts on the next available column and spans one column.

• 2-5 start at column 2, end in column 5.
• 2+3 start at column 2, span 3 columns.
• 2.. start at column 2, span remainder of row.
• 2 start at next available column, span 2 columns.

Credit

Raster — simple CSS grid system