<div class="chart">
  <div class="bar-45"></div>
  <div class="bar-100"></div>
  <div class="bar-63"></div>
  <div class="bar-11"></div>
  <div class="bar-46"></div>
  <div class="bar-88"></div>
  <div class="bar-35"></div>
  <div class="bar-11"></div>
  <div class="bar-78"></div>
  <div class="bar-91"></div>
  <div class="bar-55"></div>
  <div class="bar-16"></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;
  transition: all .6s ease;
  background-color: #ff4136;
  grid-row-start: 1;
  grid-row-end: 101;
}

$totalRows: 101;

@mixin chartValue($data) {
  $result: $totalRows - $data;
  grid-row-start: $result;
}

@for $i from 1 through $totalRows {
  .bar-#{$i} {
    @include chartValue($i);
  }
}

[class*="bar"]:nth-child(odd) {
 background-color: #ff4136; 
}

[class*="bar"]:nth-child(even) {
 background-color: #0074d9;
}