Black Lives Matter. Please consider donating to Black Girls Code today.

How do I use Plotly.js Graphs with CSS grids

I am using CSS grids with Plotly.js since I think CSS grids is the most intuitive way to quickly set up a page outline in place of say flex boxes (which are not a bad way either, by any means). My issue is that the plotly graph Div does not seem to size to what its CSS grid size is. The graphs always seem to have way too much space. I think an example would elaborate this.

My HTML code is:

<div class="dashboard-area">
  <div class="row-one">
    <div id="one-one-element">
    </div>
    <div id="one-two-element">
    </div>
    <div id="one-three-element">
    </div>
  </div>
</div>

where it is just one columns, with three elements of different grid sizes.

With my JS code being:

var data = [
    {
      x: ['giraffes', 'orangutans', 'monkeys'],
      y: [20, 14, 23],
      type: 'bar'
    }
];
var layout = {
  title: 'Zoo Test',
  barmode: 'stack',
};
Plotly.newPlot('one-one-element', data, layout);

var data = [
    {
      x: ['giraffes', 'orangutans', 'monkeys'],
      y: [20, 14, 23],
      type: 'bar'
    }
];
Plotly.newPlot('one-two-element', data);

var data = [
    {
      x: ['giraffes', 'orangutans', 'monkeys'],
      y: [20, 14, 23],
      type: 'bar'
    }
];
Plotly.newPlot('one-three-element', data);

and most importantly for this issue, my CSS code is:

.dashboard-area {
  width: 100%;
  height: 100%;
}

.row-one {
  display: grid;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}

#one-one-element {
  grid-column-start: 1;
  grid-column-end: 3;
}

#one-two-element {
  grid-column-start: 3;
  grid-column-end: 5;
}

#one-three-element {
  grid-column-start: 5;
  grid-column-end: 7;
}

I would hope the outcome would be one column with three simple graphs taking up two row spaces each.

Notice, I just repeated the same graph from the documentation for quick proto-typing. It is not the graphs themselves that are the issue.
If I set the width and height of the graphs manually, the graphs do not want to show at all.
So I try to dynamically get the size of the plotly divs with something like:

var layout = {
  ...
  height: document.getElementById('one-one.element').style.height,    // (tried quite a few thing here)
  width: document.getElementById('one-one.element').style.width
}

but that does not seem to work. I also tried getting it from the divs plotly adds with react to no avail.
I think React and CSS grids do not want to play nice. I hope someone can help me as I think being able to quickly deploy graphs with CSS grids and Plotly is a huge selling point, especially for people coming from say a Microsoft Excel background as that is what CSS Grids is most like.