Как лучше будет сверстать относительно моего примера?

.wrapper {
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-template-rows: max-content 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  max-width: 400px;
  height: 500px;
}

.div1, .div2 {
  grid-column: 1 / 1;
}

.div1 {
  background-color: blue;
  height: 100px;
}

.div2 {
  background-color: green;
}

.div3 {
  grid-column: 2 / 2;
  grid-row: 1 / span 2;
  width: 100px;
  height: 100%;
  background-color: red;
}

<div class="wrapper">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
</div>

div {
  width: 420px;
  background-color: black;
  padding: 10px;
}

div>div {
  padding: 30px 30px 10px 0;
  width: calc(100% - 30px);
  color: white;
  font-size: 100px;
  text-align: right;
}

span {
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 80px;
  margin: 10px;
  background-color: #333333;
  color: white;
  text-align: center;
  line-height: 80px;
  font-size: 30px;
  font-family: monospace;
}

span:nth-child(18) {
  width: 152px;
  text-align: left;
  padding-left: 33px;
}

span:nth-child(2),
span:nth-child(3),
span:nth-child(4) {
  background-color: #a6a6a6;
  color: black;
}

span:nth-child(5),
span:nth-child(9),
span:nth-child(13),
span:nth-child(17),
span:nth-child(20) {
  background-color: #ff9400;
  color: white;
}

<div>
  <div>0</div>
  <span>AC</span>
  <span>+/-</span>
  <span>%</span>
  <span>/</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>x</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>-</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>+</span>
  <span>0</span>
  <span>.</span>
  <span>=</span>
</div>

/*Общие стили для всех кнопок*/
button {
    border: 0;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
}
/* Общий блок калькулятора */
.calculator {
    height: 600px; /*Ширина калькулятора*/
    width: 380px; /*Высота калькулятора*/
    justify-content: space-between; /*Растяжение всех элементов внутри на ширину блока калькулятора*/
    flex-wrap: wrap; /*Перенос при ширине 100%*/
}
/* 1 блок С выводом*/
.calculator-table {
    width: 100%; /*Ширина для table*/
    height: 20%; /*Высота для table*/
    box-sizing: border-box; /*Расположение и отступы внутрь блока*/
    padding: 10px 14px; /*Отступы внутри строки*/
    background-color: #646464;
    font-size: 40px;
    text-align: right;
    color: white;
}

/* 2 блок Содержит в себе 2 колонки flex (всё что в красной границе)*/
.calculator-block {
    display: flex;
    width: 100%; /*Ширина flex*/
    height: 80%; /*Высота flex*/

    /*Выделил чтоб понятнее*/
    border: 1px solid red;
    box-sizing: border-box;
}

/* Блок с кнопками в левой колонке*/
.calculator-block-2 {
    width: 70%; /*Ширина flex*/
    background-color: #302f2f;
}

/* Блок с кнопками АС +- %*/
.calculator-block-2 .calculator-numbers {
    height: 20%; /* Высота 1 линии с 3 кнопками */
    background-color: #242424;
    display: flex; /* Flex для 3-х кнопок внутри */
}

/* Кнопки АС +- %*/
.calculator-block-2 .calculator-numbers button {
    height: 100%;/* Чтобы 3 кнопки в 1 ряду */
    width: 33.33333%;/* Чтобы 3 кнопки в 1 ряду */
    background-color: #b6b6b6;
}

/* Блок с Кнопками 1-9*/
.calculator-block-2 .calculator-numbers-19 {
    height: 80%;/* Чтобы растянуть 4 ряда кнопок 1-9 на оставшийся flex*/
    background-color: #525252;
    display: flex;/* Flex для кнопок 1-9 внутри */
    flex-wrap: wrap;
    /*Выделил чтоб понятнее*/
    border: 1px dotted blue;
    box-sizing: border-box;
}

/* Кнопки 1-9 и . */
.calculator-block-2 .calculator-numbers-19 button {
    width: 33.33333%;/* Чтобы 3 кнопки в 4 рядах */
    height: 25%;/* Чтобы 3 кнопки в 4 рядах */
    background-color: #cecece;
}
/* Кнопка 0 */
.calculator-block-2 .calculator-numbers-19 .null {
    width: 66.66666%;
    height: 25%;
    background-color: #cecece;
}


/* Блок с кнопками в правой колонке*/
.calculator-block-3 {
    width: 30%;
    background-color: #532424;
    display: block;
}
/* Кнопки в правой колонке*/
.calculator-block-3 button {
    width: 100%;
    height: 20%;
    background-color: #e49d05;
    display: block;
}

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="calculator.css">
        <title>Калькулятор</title>
    </head>
    <body>
        <div class="calculator">
            <div class="calculator-table">
                <p>00000000000000</p>
            </div>
            <div class="calculator-block">
                <div class="calculator-block-2">
                    <div class="calculator-numbers">
                        <button>AC</button>
                        <button>+/-</button>
                        <button>%</button>
                    </div>
                    <div class="calculator-numbers-19">
                        <button>7</button>
                        <button>8</button>
                        <button>9</button>
                        <button>4</button>
                        <button>5</button>
                        <button>6</button>
                        <button>1</button>
                        <button>2</button>
                        <button>3</button>
                        <button class="null">0</button>
                        <button>.</button>
                    </div>
                </div>
                <div class="calculator-block-3">
                    <button>/</button>
                    <button>x</button>
                    <button>-</button>
                    <button>+</button>
                    <button>=</button>
                </div>
            </div>
        </div>
    </body>
</html>