javascript - Overlapping items with Grid Layout does not work in the inline style version with React.js

Question

The div one and two are overlapping but with inline style it does not work.

The inline style version corresponds to style.scss version.

Why does inline style not work?

const App = props => (
  // WORKS!!!
  // <div class="wrapper">
  //   <div class="box box1">One</div>
  //   <div class="box box2">Two</div>
  //   <div class="box">Three</div>
  //   <div class="box">Four</div>
  //   <div class="box">Five</div>
  // </div>

  //NOT WORKS.
  <div style={wrapper}>
    <div style={{ ...box, ...box1 }}>One</div>
    <div style={{ ...box, ...box2 }}>Two</div>
    <div style={box}>Three</div>
    <div style={box}>Four</div>
    <div style={box}>Five</div>
  </div>
);

render(<App />, document.getElementById("root"));

Codesandbox: https://codesandbox.io/s/qxq5j1n95w

Answer 1

Not provided here, but in your SandBox example, you wrote :

const box1 = {
  gridColumnStart: 1,
  gridColumnEnd: 4,
  gridRowStart: 1,
  gridRowEnd: 3
};

instead of :

const box1 = {
  gridColumnStart: '1',
  gridColumnEnd: '4',
  gridRowStart: '1',
  gridRowEnd: '3'
};