<div class="chart">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
<div class="bar-4"></div>
<div class="bar-5"></div>
<div class="bar-6"></div>
<div class="bar-7"></div>
<div class="bar-8"></div>
<div class="bar-9"></div>
<div class="bar-10"></div>
<div class="bar-11"></div>
<div class="bar-12"></div>
</div>
* { box-sizing: border-box; }
html, body {
margin: 0;
background-color: #eee;
display: flex;
justify-content: center;
}
.chart {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(100, 1fr);
grid-column-gap: 5px;
height: 100vh;
width: 70vw;
padding: 5px 10px;
}
[class*="bar"] {
border-radius: 5px 5px 0 0;
background-color: #ff4136;
grid-row-start: 1;
grid-row-end: 101;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.