<div class="gantt">

  <span class="d-1"></span>
  <span class="d-2"></span>
  <span class="d-3"></span>
  <span class="d-4"></span>
  <span class="d-5"></span>
  <span class="d-6"></span>

  <h3 class="h-sun">sun</h3>
  <h3 class="h-mon">mon</h3>
  <h3 class="h-tue">tue</h3>
  <h3 class="h-wed">wed</h3>
  <h3 class="h-thu">thu</h3>
  <h3 class="h-fri">fri</h3>
  <h3 class="h-sat">sat</h3>
  
  <div class="t-1" style="grid-column: sun-morning / mon-night;">Take the badger for a walk</div>
  <div class="t-2" style="grid-column: mon-morning / sat-night;">Manufacture some cheese</div>
  <div class="t-3" style="grid-column: sun-morning / tue-midday;">Prepare talk on foot hygiene</div>
  <div class="t-4" style="grid-column: tue-midday / wed-night;">Sleep</div>
  <div class="t-5" style="grid-column: mon-morning / wed-midday;">Photograph breakfast</div>
  <div class="t-6" style="grid-column: mon-night / fri-morning;">Paint the inside of the refrigerator</div>
  <div class="t-7" style="grid-column: wed-midday /sat-night;">Sail to Madagascar</div>
  <div class="t-8" style="grid-column: wed-midday / thu-midday;">Sleep</div>
  <div class="t-9" style="grid-column: thu-midday / sat-night;">Plan the following week’s tasks</div>
  
</div>

.gantt {
  display: grid;
  grid-template-columns: 
      [sun-morning] 1fr [sun-midday] 1fr 
      [sun-night mon-morning] 1fr [mon-midday] 1fr 
      [mon-night tue-morning] 1fr [tue-midday] 1fr 
      [tue-night wed-morning] 1fr [wed-midday] 1fr 
      [wed-night thu-morning] 1fr [thu-midday] 1fr 
      [thu-night fri-morning] 1fr [fri-midday] 1fr 
      [fri-night sat-morning] 1fr [sat-midday] 1fr 
      [sat-night];
  grid-gap: 10px 0px;
  width: 100%;
  max-width: 1150px;
  padding-top: 40px;
  margin: 0 auto;
}


/* dividers */
span {
  border-left: 1px solid lightgrey; 
  grid-row: 1 / span 10;
}

span.d-1 { grid-column: 3; }
span.d-2 { grid-column: 5; }
span.d-3 { grid-column: 7; }
span.d-4 { grid-column: 9; }
span.d-5 { grid-column: 11; }
span.d-6 { grid-column: 13; }

/* days */
h3 {
  text-align: center;
  grid-row: 1;
}

h3.h-sun { grid-column: 1 / span 2; }
h3.h-mon { grid-column: 3 / span 2; }
h3.h-tue { grid-column: 5 / span 2; }
h3.h-wed { grid-column: 7 / span 2; }
h3.h-thu { grid-column: 9 / span 2; }
h3.h-fri { grid-column: 11 / span 2; }
h3.h-sat { grid-column: 13 / span 2; }

/* tasks */
.gantt div {
  color: white;
  font-size: 12px;
  padding: 10px 20px;
  border-radius: 20px;
}

@media only screen and (min-width: 600px) {
  .gantt div { 
    font-size: 16px;
  }
}

/* specific task styles */
.t-1 { background: #b03532; grid-row: 2; }
.t-2 { background: #33a8a5; grid-row: 3; }
.t-3 { background: #30997a; grid-row: 4; }
.t-4 { background: #6a478f; grid-row: 5; }
.t-5 { background: #da6f2b; grid-row: 6; }
.t-6 { background: #3d8bb1; grid-row: 7; }
.t-7 { background: #e03f3f; grid-row: 8; }
.t-8 { background: #59a627; grid-row: 9; }
.t-9 { background: #4464a1; grid-row: 10; }