<div class="container">
<div class="chart">
<div class="chart-row chart-period">
<div class="chart-row-item"></div>
<span>January</span><span>February</span><span>March</span>
<span>April</span><span>May</span><span>June</span>
<span>July</span><span>August</span><span>September</span>
<span>October</span><span>November</span><span>December</span>
</div>
<div class="chart-row chart-lines">
<span></span><span></span><span></span>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
<span></span><span></span><span></span>
</div>
<div class="chart-row">
<div class="chart-row-item">1</div>
<ul class="chart-row-bars">
<li class="chart-li-one">Planning</li>
</ul>
</div>
<div class="chart-row">
<div class="chart-row-item">2</div>
<ul class="chart-row-bars">
<li class="chart-li-two-a">Meeting</li>
<li class="chart-li-two-b">Analysis</li>
</ul>
</div>
<div class="chart-row">
<div class="chart-row-item">3</div>
<ul class="chart-row-bars">
<li class="chart-li-three">Design</li>
</ul>
</div>
<div class="chart-row">
<div class="chart-row-item">4</div>
<ul class="chart-row-bars">
<li class="chart-li-four">Development</li>
</ul>
</div>
<div class="chart-row">
<div class="chart-row-item">5</div>
<ul class="chart-row-bars">
<li class="chart-li-five">Testing</li>
</ul>
</div>
<div class="chart-row">
<div class="chart-row-item">6</div>
<ul class="chart-row-bars">
<li class="chart-li-six">Maintenance</li>
</ul>
</div>
<div class="chart-row">
<div class="chart-row-item">7</div>
<ul class="chart-row-bars">
<li class="chart-li-seven">Meeting</li>
</ul>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 1200px;
min-width: 650px;
margin: 0 auto;
padding: 50px;
}
.chart {
display: grid;
border: 2px solid #000;
position: relative;
overflow: hidden;
}
.chart-row {
display: grid;
grid-template-columns: 50px 1fr;
background-color: #DCDCDC;
}
.chart-row:nth-child(odd) {
background-color: #C0C0C0;
}
.chart-period {
color: #fff;
background-color: #708090 !important;
border-bottom: 2px solid #000;
grid-template-columns: 50px repeat(12, 1fr);
}
.chart-lines {
position: absolute;
height: 100%;
width: 100%;
background-color: transparent;
grid-template-columns: 50px repeat(12, 1fr);
}
.chart-period > span {
text-align: center;
font-size: 13px;
align-self: center;
font-weight: bold;
padding: 15px 0;
}
.chart-lines > span {
display: block;
border-right: 1px solid rgba(0, 0, 0, 0.3);
}
.chart-row-item {
background-color:#808080;
border: 1px solid #000;
border-top: 0;
border-left: 0;
padding: 20px 0;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.chart-row-bars {
list-style: none;
display: grid;
padding: 15px 0;
margin: 0;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px 0;
border-bottom: 1px solid #000;
}
li {
font-weight: 450;
text-align: left;
font-size: 15px;
min-height: 15px;
background-color: #708090;
padding: 5px 15px;
color: #fff;
overflow: hidden;
position: relative;
cursor: pointer;
border-radius: 15px;
}
ul .chart-li-one {
grid-column: 1/2;
background-color:#588BAE;
}
ul .chart-li-two-a {
grid-column: 2/2;
background-color: #0080FF;
}
ul .chart-li-two-b {
grid-column: 2/4;
background-color:#4682B4;
}
ul .chart-li-three {
grid-column: 3/5;
background-color:#57A0D3;
}
ul .chart-li-four {
grid-column: 3/9;
background-color:#0E4D92;
}
ul .chart-li-five {
grid-column: 7/10;
background-color:#4F97A3;
}
ul .chart-li-six {
grid-column: 10/12;
background-color:#73C2FB;
}
ul .chart-li-seven {
grid-column: 12/12;
background-color:#0080FF;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.