<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>

.gantt {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  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; }