CSS grid items stacking on top of each other instead of respecting grid-area

Question

Link to Code Sandbox: https://codesandbox.io/s/rw0j2orqmp

I have the following grid template setup:

.calculator {
  margin: auto;
  vertical-align: center;
  width: 30%;
  height: 300px;
  background-color: blue;
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-template-columns: repeat(4, auto);
  grid-template-areas:
    "display display display display"
    "clear clear clear method"
    "number number number method"
    "number number number method"
    "number number number method"
    "posNeg number decimal method";

  #display {
    display: block;
    grid-area: display;
    margin: 5px;
    resize: none;
    text-align: right;
    font-size: 40px;
    width: 95%;
    height: 100px;
  }

  .clear {
    display: block;
    grid-area: clear;
  }

  .number {
    display: block;
    grid-area: number;
  }

  .method {
    display: block;
    grid-area: method;
  }

  .posNeg {
    display: block;
    grid-area: posNeg;
  }

  .decimal {
    display: block;
    grid-area: decimal;
  }
}

The buttons in each div are all generated by the following JSX in React:

function Calculator() {
  return (
    <div className="container">
      <h1>Javascript Calculator</h1>
      <div className="calculator">
        <textarea id="display" />
        {types.map(y => (
          <div className={y} key={y}>
            {buttons.map(
              x =>
                x.type === y ? (
                  <button id={x.id} key={x.id}>
                    {x.name}
                  </button>
                ) : null
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

For some reason, my divs are not respecting their location in the grid area and instead all render at the bottom when I set their grid-area property. I tried setting as display: block; in each div class as well as I tried setting position to several different values in the parent class. I originally had each button generated automatically and the divs wrapping them did not exist, and when that was the case, each button rendered at the bottom still and took up the entire bottom 50% of the container element.

This is what it looks like:

Answer 1

This is not a valid value for grid-template-areas:

grid-template-areas:
  "display display display display"
  "clear clear clear method"
  "number number number method"
  "number number number method"
  "number number number method"
  "posNeg number decimal method";

All of your area names must form rectangles within your grid, but number does not, you can change the dangling number to decimal for example to fix it:

grid-template-areas:
  "display display display display"
  "clear clear clear method"
  "number number number method"
  "number number number method"
  "number number number method"
  "posNeg decimal decimal method";