<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; }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.