stufflog/svelte-ui/src/components/Col.svelte

<script>
  export let size = 1;
</script>

<div class="col col-{size}"><slot></slot></div>

<style>
  div.col {
    display: inline-block;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  div.col-1 {
    width: calc((100% / 12) * 1)
  }
  div.col-2 {
    width: calc((100% / 12) * 2)
  }
  div.col-3 {
    width: calc((100% / 12) * 3)
  }
  div.col-4 {
    width: calc((100% / 12) * 4)
  }
  div.col-5 {
    width: calc((100% / 12) * 5)
  }
  div.col-6 {
    width: calc((100% / 12) * 6)
  }
  div.col-7 {
    width: calc((100% / 12) * 7)
  }
  div.col-8 {
    width: calc((100% / 12) * 8)
  }
  div.col-9 {
    width: calc((100% / 12) * 9)
  }
  div.col-10 {
    width: calc((100% / 12) * 10)
  }
  div.col-11 {
    width: calc((100% / 12) * 11)
  }
  div.col-12 {
    width: 100%
  }
</style>