JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <main id="viewporto">
      <h1>

        grid for grids - using dense to condense!
      </h1>

      <h2>
        basic
      </h2>
      <section class="basic">
        <template v-for="(dd, index) in datecols">
          <div style="border: 1px solid #ccc">
            <span v-text="dd.daynum"></span>
          </div>
        </template>
        <!--  -->
        <template v-for="(item, index) in list">

          <div v-bind:style="{backgroundColor: item.bg, 'grid-column-start': item.start, 'grid-column-end': 'span '+item.dur}">

            <span v-text="item.id+'('+item.start+' for '+item.dur+')'" style="background-color: #828282;
      color: #fff;
      border-radius:3px;
      padding-left: .5em;
      padding-right: .5em;"></span>
          </div>

        </template>
      </section>

      <h2>
        with dense
      </h2>
      <section class="withdense">
        <template v-for="(dd, index) in datecols">
          <div style="border: 1px solid #ccc">
            <span v-text="dd.daynum"></span>
          </div>
        </template>
        <!--  -->
        <template v-for="(item, index) in list">

          <div v-bind:style="{backgroundColor: item.bg, 'grid-column-start': item.start, 'grid-column-end': 'span '+item.dur}">

            <span v-text="item.id+'('+item.start+' for '+item.dur+')'" style="background-color: #828282;
      color: #fff;
      border-radius:3px;
      padding-left: .5em;
      padding-right: .5em;"></span>
          </div>

        </template>
      </section>

      <h2>
        listing
      </h2>
      <p>
        this is a list of the elements that are in the js model
      </p>
      <template v-for="(item, index) in list">

        <div v-bind:style="{backgroundColor: item.bg, 'grid-column-start': item.start, 'grid-column-end': 'span '+item.dur}">

          <span v-text="item.id+'('+item.start+' for '+item.dur+')'"...

CSS

section.basic {
  display: grid;
  grid-template-columns: repeat(15, minmax(40px,1fr));
  grid-auto-rows: 25px;
}

section.withdense {
  display: grid;
  grid-template-columns: repeat(15, minmax(40px,1fr));
  grid-auto-rows: 25px;
  grid-auto-flow: row dense
}

JavaScript

var ride = (function () {
  return {
    vM: new Vue({
      el: '#viewporto',
      data: {
          title: 'TEMPLATE',
          datecols: [],
          list: [
            {id: "a",start: 1, dur: 3, bg: "teal"},
            {id: "b",start: 1, dur: 5,bg: "silver"},
            {id: "c",start: 2, dur: 3,bg: "gray"},
            {id: "d",start: 6, dur: 7,bg: "maroon"},
            {id: "e",start: 1, dur: 4,bg: "yellow"},
            {id: "f",start: 3, dur: 4,bg: "olive"},
            {id: "g",start: 6, dur: 5,bg: "lime"},
            {id: "h",start: 3, dur: 5,bg: "green"},
            {id: "i",start: 2, dur: 1,bg: "blue"},
            {id: "j",start: 5, dur: 1,bg: "blue"},
            {id: "k",start: 1, dur: 1,bg: "navy"},
            {id: "l",start: 4, dur: 4,bg: "aqua"},
            {id: "m",start: 5, dur: 5,bg: "purple"},
            {id: "n",start: 1, dur: 4,bg: "yellow"},
            {id: "o",start: 3, dur: 4,bg: "olive"},
            {id: "p",start: 6, dur: 5,bg: "lime"}
          ]
        }

      }),
      fetchHandel: async function(abc, fgh) {

        return {foobar: 1};
      }
    };


  }());
  //Vue.createApp(corvis.vM).mount('#soma');
  //on loaded
  document.addEventListener("DOMContentLoaded", function(){
    console.info('hiya exp');
    for (let k = 0; k<15;k++){
      ride.vM.datecols.push({ix: k, daynum: (k+1)});
    }



  });