<div class="chart-container">
  <div class="chart">
    <div class="bar" style="--i: 1 ; --s: 1; --e: 3;"></div>
    <div class="bar" style="--i: 2 ; --s: 5; --e: 10;"></div>
    <div class="bar" style="--i: 3 ; --s: 7; --e: 8;"></div>
    <div class="bar" style="--i: 4 ; --s: 2; --e: 6;"></div>
    <div class="bar" style="--i: 5 ; --s: 9; --e: 10;"></div>
    <div class="bar" style="--i: 6 ; --s: 1; --e: 3;"></div>
    <div class="bar" style="--i: 7 ; --s: 5; --e: 10;"></div>
    <div class="bar" style="--i: 8 ; --s: 7; --e: 8;"></div>
    <div class="bar" style="--i: 9 ; --s: 2; --e: 6;"></div>
    <div class="bar" style="--i: 10 ; --s: 9; --e: 10;"></div>

    <div class="cordinate">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
  </div>

  <div class="rows">
    <div class="row">-1</div>
    <div class="row">-2</div>
    <div class="row">-3</div>
    <div class="row">-4</div>
    <div class="row">-5</div>
    <div class="row">-6</div>
    <div class="row">-7</div>
    <div class="row">-8</div>
    <div class="row">-9</div>
    <div class="row">-10</div>
  </div>    
  <div class="columns">
    <div class="column">A</div>
    <div class="column">B</div>
    <div class="column">C</div>
    <div class="column">D</div>
    <div class="column">E</div>
    <div class="column">F</div>
    <div class="column">G</div>
    <div class="column">H</div>
    <div class="column">I</div>
    <div class="column">J</div>
  </div>    

</div>

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
  box-sizing: border-box;
}

body {  
  font: 70%/1.6 Roboto;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-container {
  position: relative;
  color: #646464;
}

.chart {
  display: grid;
  grid-template-columns: repeat(10, 40px);
  grid-template-rows: repeat(9, 40px);

  gap: 0 8px;
}

.bar {
  grid-row: var(--s) / var(--e);
  grid-column-start: var(--i);
  
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 4px; 
}

.bar:nth-child(odd) {
  background: rgba(255, 99, 132, 1);
}

.bar:nth-child(even) {
  background: rgba(54, 162, 235, 1);
}

.cordinate {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(10, 40px);
  z-index: -1;
  gap: inherit;
}

.cell {
  border-block-start: 1px solid #ddd;
}

.rows {
  position: absolute;
  inset-block-start: -8px;
  inset-inline-end: 100%;

  display: grid;
  grid-template-columns: 40px;
  grid-template-rows: repeat(10, 40px);
}

.row {

}

.columns {
  inset-block-start: 100%;
  inset-inline-start: 0;

  display: grid;
  grid-template-columns: repeat(10, 40px);
  grid-template-rows: 40px;
  gap: 0 8px;
}

.column {
  display: flex;
  align-items: center;
  justify-content: center;
}