<template>
  <div class="col" :style="{ width: filterWidth(span) }">
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    span: {
      type: Number,
      default: null,
    },
  },
  methods: {
    filterWidth(col) {
      if (col) {
        const width = (1 / (24 / col)) * 100 + "%";
        return width;
      }
      return 0;
    },
  },
};
</script>

<style lang="scss" scoped>
.col {
  display: flex;
  align-items: center;
}
</style>