这似乎很适合一组嵌套的display:grid，因为这正是您所描述的。
我添加了一些难看的边框来显示东西的位置，并 Package 了一些块来进行逻辑分组（网格）。
我用类来定义样式而不是id，只是因为我认为这样做更好。
可能还有一些改进代码和删除class="m1r2"等未使用类的空间。例如，我不会将onclick="mc.calculateDeterminant()"等代码放在HTML中，但这不是您问题的一部分。
编辑：

• 交换中间组
• 在矩阵中做了一些比对
• 请原谅我的修订，但在审查时，我决定<h1>是有问题的，为这种用途时，考虑到中间部分，所以我改变了它为<div class="title">只给出了这里的原因：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

class MatrixCalculator {
  constructor() {
    this.matrixA = [];
    this.matrixB = [];
    for (var i = 0; i < 3; i++) {
      this.matrixA[i] = [];
      this.matrixB[i] = [];
    }

    this.AxDimension = 3;
    this.AyDimension = 3;
    this.BxDimension = 3;
    this.ByDimension = 3;
  }

  calculateRank() {
    this.rebuildMatrix();

    var rank = this.AxDimension;
    var row = this.AyDimension;
    var mat = this.matrixA;

    for (row = 0; row < rank; row++) {
      if (mat[row][row]) {
        for (var col = 0; col < this.AyDimension; col++) {
          if (col != row) {
            var mult = Math.round(mat[col][row] / mat[row][row] * 100) / 100;
            for (var i = 0; i < rank; i++)
              mat[col][i] -= mult * mat[row][i];
          }
        }
      } else {
        var reduce = true;
        for (var i = row + 1; i < this.AyDimension; i++) {
          if (mat[i][row]) {
            var aux = mat[row];
            mat[row] = math[i];
            math[i] = aux;
            reduce = false;
            break;
          }
        }
        if (reduce) {
          rank--;
          for (i = 0; i < this.AyDimension; i++)
            mat[i][row] = mat[i][rank];
        }
        row--;
      }
    }
    this.printOnConsole("Matrix rank is: " + rank);
  }

  invertMatrix() {
    this.calculateDeterminant();
    if (this.determinantA == null)
      return; //Error will already be printed out by calculateDeterminant method.
    if (this.determinantA == 0) {
      this.printOnConsole("Matrix is non-invertible.");
      return;
    }
    var adjacent = [];
    var result = [];
    var aux = [];
    for (var i = 0; i < 3; i++) {
      adjacent[i] = [];
      result[i] = [];
      aux[i] = [];
    }
    //Calculating adjacency matrix
    for (i = 0; i < this.AyDimension; i++) {
      for (var j = 0; j < this.AxDimension; j++) {
        if (this.AxDimension == 1)
          adjacent[i][j] = 1 + "/" + this.matrixA[i][j];
        if (this.AxDimension == 2) {
          adjacent[j][i] = ((-1) ** (i + 1 + j + 1)) * this.matrixA[i][j];
        }
        if (this.AxDimension == 3) {
          //Reconstructing 2 dimension sub matrix
          var count1 = 0;
          var count2 = 0;
          for (var k = 0; k < 3; k++) {
            for (var l = 0; l < 3; l++) {
              if (l != j && k != i) {
                aux[count1][count2] = this.matrixA[k][l];
                count2++;
              }
            }
            count2 = 0;
            if (k != i)
              count1++;
          }
          adjacent[i][j] = ((-1) ** (i + 1 + j + 1)) * (aux[0][0] * aux[1][1] - aux[0][1] * aux[1][0]);
        }
      }
    }
    //Transposing it
    for (var i = 0; i < this.AxDimension; i++) {
      for (var j = 0; j < this.AyDimension; j++) {
        result[i][j] = adjacent[j][i];
      }
    }
    if (this.AxDimension == 2) {
      var temp = result[0][0];
      result[0][0] = result[1][1];
      result[1][1] = temp;
    }

    //We divide by the determinant
    if (this.AxDimension != 1) {
      for (var i = 0; i < this.AxDimension; i++) {
        for (var j = 0; j < this.AyDimension; j++) {
          result[i][j] = Math.round(result[i][j] / this.determinantA * 100) / 100;
        }
      }
    }

    var string = "Inverse matrix:\r";
    for (i = 0; i < this.AyDimension; i++) {
      for (var j = 0; j < this.AxDimension; j++) {
        string = string + "\t" + result[i][j];
      }
      string = string + "\r";
    }
    this.printOnConsole(string);

  }

  transposeMatrix() {
    this.rebuildMatrix();
    var string = "Transposition result:\r";
    for (var i = 0; i < this.AxDimension; i++) {
      for (var j = 0; j < this.AyDimension; j++) {
        string = string + "\t" + this.matrixA[j][i];
      }
      string = string + "\r";
    }
    this.printOnConsole(string);
  }

  subtractMatrix() {
    this.rebuildMatrix();
    if (this.AxDimension != this.AyDimension) {
      this.printOnConsole("Matrices have different dimmensions.");
      return;
    }
    var result = [];
    for (var i = 0; i < 3; i++)
      result[i] = [];
    for (i = 0; i < this.AyDimension; i++) {
      for (var j = 0; j < this.AxDimension; j++) {
        result[i][j] = Math.round((parseFloat(this.matrixA[i][j]) - parseFloat(this.matrixB[i][j])) * 100) / 100;
      }
    }
    var string = "Subtraction result:\r";
    for (i = 0; i < this.AyDimension; i++) {
      for (var j = 0; j < this.AxDimension; j++) {
        string = string + "\t" + result[i][j];
      }
      string = string + "\r";
    }
    this.printOnConsole(string);
  }

  addMatrix() {
    this.rebuildMatrix();
    if (this.AxDimension != this.AyDimension) {
      this.printOnConsole("Matrices have different dimmensions.");
      return;
    }
    var result = [];
    for (var i = 0; i < 3; i++)
      result[i] = [];
    for (i = 0; i < this.AyDimension; i++) {
      for (var j = 0; j < this.AxDimension; j++) {
        //Parsing is necessary here since addition operator can also concatenate strings
        result[i][j] = Math.round((parseFloat(this.matrixA[i][j]) + parseFloat(this.matrixB[i][j])) * 100) / 100;
      }
    }
    var string = "Addition result:\r";
    for (i = 0; i < this.AyDimension; i++) {
      for (var j = 0; j < this.AxDimension; j++) {
        string = string + "\t" + result[i][j];
      }
      string = string + "\r";
    }
    this.printOnConsole(string);
  }

  multiplyMatrix() {
    this.rebuildMatrix();
    if (this.AxDimension != this.ByDimension) {
      this.printOnConsole("Number of columns on A is different from number of rows on B.");
      return;
    }
    var result = [];
    for (var i = 0; i < 3; i++)
      result[i] = [];
    i = 0;
    var j = 0;
    //x refers to columns, y refers to rows
    var rowsRes = this.AyDimension;
    var columnsRes = this.BxDimension;

    for (i = 0; i < rowsRes; i++) {
      for (j = 0; j < columnsRes; j++) {
        result[i][j] = this.matrixA[i][0] * this.matrixB[0][j] + this.matrixA[i][1] * this.matrixB[1][j] + this.matrixA[i][2] * this.matrixB[2][j];
        result[i][j] = Math.round(result[i][j] * 100) / 100;
      }
    }
    var string = "Multiplication result:\r";
    for (i = 0; i < rowsRes; i++) {
      for (j = 0; j < columnsRes; j++) {
        string = string + "\t" + result[i][j];
      }
      string = string + "\r";
    }
    this.printOnConsole(string);
  }

  calculateDeterminant() {
    this.rebuildMatrix();
    if (this.AxDimension != this.AyDimension) {
      this.determinantA = null;
      this.printOnConsole("Non-square matrix, determinant cannot be calculated.");
      return;
    }
    var determinant;
    if (this.AxDimension == 1) {
      determinant = this.matrixA[0][0];
    }
    if (this.AxDimension == 2) {
      determinant = (this.matrixA[0][0] * this.matrixA[1][1]) - (this.matrixA[0][1] * this.matrixA[1][0]);
    }
    if (this.AxDimension == 3) {
      var op1, op2, op3, r1, r2, r3;
      op1 = this.matrixA[0][0] * this.matrixA[1][1] * this.matrixA[2][2];
      op2 = this.matrixA[0][1] * this.matrixA[1][2] * this.matrixA[2][0];
      op3 = this.matrixA[0][2] * this.matrixA[1][0] * this.matrixA[2][1];
      r1 = this.matrixA[0][2] * this.matrixA[1][1] * this.matrixA[2][0];
      r2 = this.matrixA[0][0] * this.matrixA[1][2] * this.matrixA[2][1];
      r3 = this.matrixA[0][1] * this.matrixA[1][0] * this.matrixA[2][2];
      determinant = Math.round((op1 + op2 + op3 - r1 - r2 - r3) * 100) / 100;
    }
    this.determinantA = determinant;
    this.printOnConsole("Determinant: " + determinant)
    return;
  }

  printOnConsole(val) {
    document.getElementById("console").value = val;
  }

  rebuildMatrix() {
    var row1 = document.getElementsByClassName("m1r1");
    var row2 = document.getElementsByClassName("m1r2");
    var row3 = document.getElementsByClassName("m1r3");
    for (var i = 0; i < 3; i++) {
      this.matrixA[0][i] = row1[i].value;
      this.matrixA[1][i] = row2[i].value;
      this.matrixA[2][i] = row3[i].value;
    }
    row1 = document.getElementsByClassName("m2r1");
    row2 = document.getElementsByClassName("m2r2");
    row3 = document.getElementsByClassName("m2r3");
    for (var i = 0; i < 3; i++) {
      this.matrixB[0][i] = row1[i].value;
      this.matrixB[1][i] = row2[i].value;
      this.matrixB[2][i] = row3[i].value;
    }
    this.calculateDimensions();
  }

  calculateDimensions() {
    //Calculating matrix A's dimensions
    this.AyDimension = 3;
    this.AxDimension = 3;

    var count = 2;
    //If there's a whole column of 0's, we'll decrease the dimension and look at the next one.
    while (count >= 0 && this.matrixA[0][count] == 0 && this.matrixA[1][count] == 0 && this.matrixA[2][count] == 0) {
      this.AxDimension--;
      count--;
    }
    count = 2;
    //If there's a whole row of 0's, we'll decrease the dimension and look at the next one.
    while (count >= 0 && this.matrixA[count][0] == 0 && this.matrixA[count][1] == 0 && this.matrixA[count][2] == 0) {
      this.AyDimension--;
      count--;
    }

    //Calculating matrix B's dimensions in the same way
    this.ByDimension = 3;
    this.BxDimension = 3;

    var count = 2;
    while (count >= 0 && this.matrixB[0][count] == 0 && this.matrixB[1][count] == 0 && this.matrixB[2][count] == 0) {
      this.BxDimension--;
      count--;
    }
    count = 2;
    while (count >= 0 && this.matrixB[count][0] == 0 && this.matrixB[count][1] == 0 && this.matrixB[count][2] == 0) {
      this.ByDimension--;
      count--;
    }
  }
}

var mc = new MatrixCalculator();

.page-container {
  display: grid;
  grid-gap: 1rem;
  grid-template-areas: "head" "matrix" "lower";
  font-size: 16px;
}

.page-container>* {
  /* main container */
  border: solid 1px lime;
}

header {
  grid-area: head;
  display: grid;
  /* super center */
  place-items: center;
}

.upper-container {
  grid-area: matrix;
  display: grid;
  grid-template-areas: "matrixA mid matrixB";
}

.upper-container>* {
  border: solid blue 1px;
  display: grid;
  /* super center */
  place-items: center;
}

.middle-container {
  grid-area: mid;
  display: grid;
  /* super center */
  place-items: center;
  grid-template-areas: "title" "ops" "fun";
}

.lower-container {
  grid-area: lower;
  display: grid;
  /* super center */
  place-items: center;
}

/* end of main-container blocks */

.matrix-container {
  display: grid;
  grid-template-rows: 3rem repeat(3, 1.25rem);
  grid-template-areas: "title title title" "bt bt bt" "bm bm bm" "be be be";
  background-color: #FAFAFA;
}

.title {
  grid-area: title;
  font-family: "Times New Roman", serif;
  height: 2rem;
  font-size: 2em;
  font-weight: 600;
  margin: 0;
  padding: 0.5rem 0.5rem;
  border: solid green 1px;
}

.br {
  display: grid;
  grid-template-columns: repeat(3, 3em);
  border: 1px solid red;
}

.br>* {
  text-align: center;
  height: 1rem;
}

.br-1 {
  grid-area: bt;
}

.br-2 {
  grid-area: bm;
}

.br-3 {
  grid-area: be;
}

.functions-container {
  grid-area: fun;
}

.operations-container {
  grid-area: ops;
}

.lower-container>* {
  width: 100%;
}

.operations-container,
.functions-container {
  display: grid;
  place-items: center;
}

.function {
  width: 8em;
  height: 1.5em;
  border-radius: 2em;
}

.operation {
  width: 5em;
  height: 1.5em;
}

<div class="page-container">
  <header><img src="./logo.png" alt="Page logo JSMatrix Calculator" /></header>
  <div id="upper" class="upper-container">
    <div id="matrix1" class="parent matrix-container matrix-a">
      <div class="title">Matrix A</div>
      <div class="br br-1">
        <input class="m1r1" type="text" value="0" />
        <input class="m1r1" type="text" value="0" />
        <input class="m1r1" type="text" value="0" />
      </div>
      <div class="br br-2">
        <input class="m1r2" type="text" value="0" />
        <input class="m1r2" type="text" value="0" />
        <input class="m1r2" type="text" value="0" />
      </div>
      <div class="br br-3">
        <input class="m1r3" type="text" value="0" />
        <input class="m1r3" type="text" value="0" />
        <input class="m1r3" type="text" value="0" />
      </div>
    </div>
    <div class="middle-container">
      <div class="title"></div>
      <div class="functions-container functions">
        <input class="function" type="button" value="Determinant" onclick="mc.calculateDeterminant()" />
        <input class="function" type="button" value="Transpose" onclick="mc.transposeMatrix()" />
        <input class="function" type="button" value="Invert" onclick="mc.invertMatrix()" />
        <input class="function" type="button" value="Rank" onclick="mc.calculateRank()" />
      </div>
      <div id="operations" class="operations-container">
        <input class="operation" type="button" value="A x B" onclick="mc.multiplyMatrix()" />
        <input class="operation" type="button" value="A + B" onclick="mc.addMatrix()" />
        <input class="operation" type="button" value="A - B" onclick="mc.subtractMatrix()" />
      </div>
    </div>
    <div id="matrix2" class="parent matrix-container matrix-b">
      <div class="title">Matrix B</div>
      <div class="br br-1">
        <input class="m2r1" type="text" value="0" />
        <input class="m2r1" type="text" value="0" />
        <input class="m2r1" type="text" value="0" />
      </div>
      <div class="br br-2">
        <input class="m2r2" type="text" value="0" />
        <input class="m2r2" type="text" value="0" />
        <input class="m2r2" type="text" value="0" />
      </div>
      <div class="br br-3">
        <input class="m2r3" type="text" value="0" />
        <input class="m2r3" type="text" value="0" />
        <input class="m2r3" type="text" value="0" />
      </div>
    </div>
  </div>
  <div id="lower" class="lower-container">
    <textarea wrap="soft" rows="10" cols="20" id="console" disabled></textarea>
  </div>
</div>

使用您最初的 *Flexbox布局 *，我简化了您的代码，创建了一个响应性好的Flexbox版本，您可以在此基础上进行构建。
代码变更：

• 重新排列Flexbox元素的用法，以启用视区相关的大小调整。
• 制作所有.calculator div * 柔性盒容器 *，包括.calculator。
• 删除所有order赋值，仅保留一个需要的赋值。
• 删除了所有冗余和重复的代码。
• 为清楚起见，将代码分为“机制”和“视觉糖果”。
• “Eye-candy”可以安全地移除或修改，同时保持“机械装置”完好无损。
• 确保计算器适合360 x640 px的视口大小。
• 在按钮文本中添加了ellipsis，以适应更窄的视口（〈200 px）。
• 在适用情况下注解代码。

顺便说一句：你可以把所有的代码放在一个使用标准结构的文档中。

片段

class MatrixCalculator {
    constructor() {
        this.matrixA = [];
        this.matrixB = [];
        for(var i=0; i<3; i++) {
            this.matrixA[i] = [];
            this.matrixB[i] = [];
        }
        
        this.AxDimension = 3;
        this.AyDimension = 3;
        this.BxDimension = 3;
        this.ByDimension = 3;
    }
    
    calculateRank() {
        this.rebuildMatrix();
        
        var rank = this.AxDimension;
        var row = this.AyDimension;
        var mat = this.matrixA;
        
        for (row = 0; row < rank; row++) { 
            if (mat[row][row]) { 
               for (var col = 0; col < this.AyDimension; col++) { 
                   if (col != row) { 
                     var mult = Math.round(mat[col][row] / mat[row][row]*100)/100; 
                     for (var i = 0; i < rank; i++) 
                       mat[col][i] -= mult * mat[row][i]; 
                  } 
               } 
            } 
            else
            { 
                var reduce = true; 
                for (var i = row + 1; i < this.AyDimension;  i++) 
                { 
                    if (mat[i][row]) 
                    { 
                        var aux = mat[row];
                        mat[row] = math[i];
                        math[i] = aux;
                        reduce = false; 
                        break; 
                    } 
                } 
                if (reduce) 
                { 
                    rank--; 
                    for (i = 0; i < this.AyDimension; i++) 
                        mat[i][row] = mat[i][rank]; 
                } 
                row--; 
            } 
        } 
        this.printOnConsole("Matrix rank is: "+rank);       
    }
    
    invertMatrix() {        
        this.calculateDeterminant();
        if (this.determinantA==null)
            return; //Error will already be printed out by calculateDeterminant method.
        if(this.determinantA==0) {
            this.printOnConsole("Matrix is non-invertible.");
            return;
        }
        var adjacent = [];
        var result = [];
        var aux = [];
        for(var i=0; i<3; i++) {
            adjacent[i] = [];
            result[i] = [];
            aux[i]=[];
        }
        //Calculating adjacency matrix
        for (i =0; i<this.AyDimension; i++) {
            for (var j=0; j<this.AxDimension; j++) {
                if (this.AxDimension == 1)
                    adjacent[i][j] = 1+"/"+this.matrixA[i][j];
                if (this.AxDimension==2) {
                    adjacent[j][i] = ((-1)**(i+1+j+1))*this.matrixA[i][j];
                }
                if (this.AxDimension==3) { 
                    //Reconstructing 2 dimension sub matrix
                    var count1 = 0;
                    var count2 = 0;
                    for (var k=0; k<3; k++) {
                        for (var l=0; l<3; l++) {
                            if (l!=j && k!=i) {
                                aux[count1][count2]=this.matrixA[k][l];
                                count2++;
                            }
                        }
                        count2 = 0;
                        if (k!=i)
                            count1++;
                    }
                    adjacent[i][j] = ((-1)**(i+1+j+1))*(aux[0][0]*aux[1][1]-aux[0][1]*aux[1][0]);
                }
            }
        }
        //Transposing it
        for (var i =0; i<this.AxDimension; i++) {
            for (var j=0; j<this.AyDimension; j++) {
                result[i][j]=adjacent[j][i];
            }
        }
        if (this.AxDimension==2) {
            var temp = result[0][0];
            result[0][0] = result[1][1];
            result[1][1] = temp;
        }
        
        //We divide by the determinant
        if (this.AxDimension!=1) {
            for (var i =0; i<this.AxDimension; i++) {
                for (var j=0; j<this.AyDimension; j++) {
                    result[i][j]=Math.round(result[i][j]/this.determinantA*100)/100;
                }
            }
        }
        
        var string = "Inverse matrix:\r";
        for (i =0; i<this.AyDimension; i++) {
            for (var j=0; j<this.AxDimension; j++) {
                string=string+"\t"+result[i][j];
            }
            string=string+"\r";
        }
        this.printOnConsole(string);
        
    }
    
    transposeMatrix() {
        this.rebuildMatrix();
        var string = "Transposition result:\r";
        for (var i =0; i<this.AxDimension; i++) {
            for (var j=0; j<this.AyDimension; j++) {
                string=string+"\t"+this.matrixA[j][i];
            }
            string=string+"\r";
        }
        this.printOnConsole(string);
    }
    
    subtractMatrix() {
        this.rebuildMatrix();
        if (this.AxDimension!=this.AyDimension) {
            this.printOnConsole("Matrices have different dimmensions.");
            return;
        }
        var result = [];
        for(var i=0; i<3; i++) 
            result[i]=[];
        for (i =0; i<this.AyDimension; i++) {
            for (var j=0; j<this.AxDimension; j++) {
                result[i][j]=Math.round((parseFloat(this.matrixA[i][j])-parseFloat(this.matrixB[i][j]))*100)/100;
            }
        }
        var string = "Subtraction result:\r";
        for (i =0; i<this.AyDimension; i++) {
            for (var j=0; j<this.AxDimension; j++) {
                string=string+"\t"+result[i][j];
            }
            string=string+"\r";
        }
        this.printOnConsole(string);
    }
    
    addMatrix() {
        this.rebuildMatrix();
        if (this.AxDimension!=this.AyDimension) {
            this.printOnConsole("Matrices have different dimmensions.");
            return;
        }
        var result = [];
        for(var i=0; i<3; i++) 
            result[i]=[];
        for (i =0; i<this.AyDimension; i++) {
            for (var j=0; j<this.AxDimension; j++) {
                //Parsing is necessary here since addition operator can also concatenate strings
                result[i][j]=Math.round((parseFloat(this.matrixA[i][j])+parseFloat(this.matrixB[i][j]))*100)/100;
            }
        }
        var string = "Addition result:\r";
        for (i =0; i<this.AyDimension; i++) {
            for (var j=0; j<this.AxDimension; j++) {
                string=string+"\t"+result[i][j];
            }
            string=string+"\r";
        }
        this.printOnConsole(string);
    }
    
    multiplyMatrix() {
        this.rebuildMatrix();
        if (this.AxDimension!=this.ByDimension) {
            this.printOnConsole("Number of columns on A is different from number of rows on B.");
            return;
        }
        var result = [];
        for(var i=0; i<3; i++) 
            result[i]=[];
        i=0;
        var j=0;
        //x refers to columns, y refers to rows
        var rowsRes = this.AyDimension;
        var columnsRes = this.BxDimension;
        
        for (i=0; i<rowsRes; i++) {
            for (j=0; j<columnsRes; j++) {
                result[i][j] = this.matrixA[i][0]*this.matrixB[0][j]+this.matrixA[i][1]*this.matrixB[1][j]+this.matrixA[i][2]*this.matrixB[2][j];
                result[i][j] = Math.round(result[i][j]*100)/100;
            }
        }
        var string = "Multiplication result:\r";
        for (i=0; i<rowsRes; i++) {
            for (j=0; j<columnsRes; j++) {
                string=string+"\t"+result[i][j];
            }
            string=string+"\r";
        }
        this.printOnConsole(string);
    }
    
    calculateDeterminant() {
        this.rebuildMatrix();
        if (this.AxDimension!=this.AyDimension) {
            this.determinantA=null;
            this.printOnConsole("Non-square matrix, determinant cannot be calculated.");
            return;
        }
        var determinant;
        if (this.AxDimension==1) {
            determinant = this.matrixA[0][0];
        }
        if (this.AxDimension==2) {
            determinant = (this.matrixA[0][0]*this.matrixA[1][1])-(this.matrixA[0][1]*this.matrixA[1][0]);
        }
        if (this.AxDimension==3) {
            var op1, op2, op3, r1, r2, r3;
            op1 = this.matrixA[0][0]*this.matrixA[1][1]*this.matrixA[2][2];
            op2 = this.matrixA[0][1]*this.matrixA[1][2]*this.matrixA[2][0];
            op3 = this.matrixA[0][2]*this.matrixA[1][0]*this.matrixA[2][1];
            r1 = this.matrixA[0][2]*this.matrixA[1][1]*this.matrixA[2][0];
            r2 = this.matrixA[0][0]*this.matrixA[1][2]*this.matrixA[2][1];
            r3 = this.matrixA[0][1]*this.matrixA[1][0]*this.matrixA[2][2];
            determinant = Math.round((op1+op2+op3-r1-r2-r3)*100)/100;
        }
        this.determinantA = determinant;
        this.printOnConsole("Determinant: "+determinant)
        return;
    }
    
    printOnConsole(val) {
        document.getElementById("console").value = val;
    }
    
    rebuildMatrix() {
        var row1 = document.getElementsByClassName("m1r1");
        var row2 = document.getElementsByClassName("m1r2");
        var row3 = document.getElementsByClassName("m1r3");
        for (var i=0; i<3; i++) {
            this.matrixA[0][i] = row1[i].value;
            this.matrixA[1][i] = row2[i].value;
            this.matrixA[2][i] = row3[i].value;
        }
        row1 = document.getElementsByClassName("m2r1");
        row2 = document.getElementsByClassName("m2r2");
        row3 = document.getElementsByClassName("m2r3");
        for (var i=0; i<3; i++) {
            this.matrixB[0][i] = row1[i].value;
            this.matrixB[1][i] = row2[i].value;
            this.matrixB[2][i] = row3[i].value;
        }
        this.calculateDimensions();
    }
    
    calculateDimensions() {
        //Calculating matrix A's dimensions
        this.AyDimension = 3;
        this.AxDimension = 3;
        
        var count = 2;
        //If there's a whole column of 0's, we'll decrease the dimension and look at the next one.
        while (count>=0 && this.matrixA[0][count]==0 && this.matrixA[1][count]==0 && this.matrixA[2][count]==0) {
            this.AxDimension--;
            count--;
        }
        count = 2;
        //If there's a whole row of 0's, we'll decrease the dimension and look at the next one.
        while (count>=0 && this.matrixA[count][0]==0 && this.matrixA[count][1]==0 && this.matrixA[count][2]==0) {
            this.AyDimension--;
            count--;
        }
        
        //Calculating matrix B's dimensions in the same way
        this.ByDimension = 3;
        this.BxDimension = 3;
        
        var count = 2;
        while (count>=0 && this.matrixB[0][count]==0 && this.matrixB[1][count]==0 && this.matrixB[2][count]==0) {
            this.BxDimension--;
            count--;
        }
        count = 2;
        while (count>=0 && this.matrixB[count][0]==0 && this.matrixB[count][1]==0 && this.matrixB[count][2]==0) {
            this.ByDimension--;
            count--;
        }       
    }
}

var mc = new MatrixCalculator();

* { outline: 1px dashed } /* for debugging */

/***********/
/* Globals */
/***********/
* { box-sizing: border-box }

body { margin: 0 }
img  { display: block; width: 100%; object-fit: cover }

/************************/
/* Calculator Mechanism */
/************************/
/* Flexbox Layout: BEWARE!!! All 'div' */
.calculator, .calculator div {
    display: flex;
    justify-content: center;
}

[C] { flex-direction: column } /* easy overrides */
[R] { flex-direction: row }
[W] { flex-wrap: wrap }

/* Makes .title top aligned as per OP request */
.calculator :is(.matrix, .tools) { justify-content: start }

/* Responsive flexbox positioning */
@media all and (max-width: 512px) {
    .tools { order: 1 } /* move below matrices */
}

/* container ratios */
/* vertical alignment main containers */
.header { flex: 0 } /* don't grow */
.upper  { flex: 6 } /* 60% */
.lower  { flex: 4 } /* 40% */

/* horizontal alignment 'upper' container elements */
.tools  { flex: 0 } /* or some ratio */
.matrix { flex: 1 } /* like above... */

/* Sizing */
.calculator { width: 100% }
.upper > *  { min-width: min(10rem, 100%) } /* toy with this */

.cells > * { /* matrix input cells */
    flex-basis: 33.3333%; /* 3 in a row */
    min-width: 0; /* overrides input default */
}
/* Tools buttons */
[type="button"] { width: 100%; max-width: 8rem; margin: 0 auto }
#console        { min-width: calc(100vw - 1rem); max-width: calc(100vw - 1rem) }

/*************************/
/* Calculator Eye-candy, */
/* can all be removed... */
/*************************/
.calculator     { --pad: 0.5rem; background-color: hsl(0,0%,98%) }
.calculator > * { padding: var(--pad) }

.header         { padding: var(--pad) }
.cells          { padding: var(--pad) 0 }
.tools > *      { padding: var(--pad) }

@media all and (max-width: 512px) {
    .upper { gap: var(--pad) } /* gap between matrices */
}

.calculator *   { text-align: center } /* everything */
#console        { text-align: left }

.title {
    font-family: "Times New Roman", serif;
    font-size: 2rem; line-height: 2rem; font-weight: 700;

    padding: var(--pad);
}
.tools .title   { font-size: 1.25rem }
[type="button"] { border-radius: 1em; overflow: hidden; text-overflow: ellipsis; }

<div class="calculator" C>
    <div class="header">
        <img src="https://picsum.photos/id/0/800/100" alt="Page logo JSMatrix Calculator" />
    </div>

    <div class="upper" R W>
        <div class="matrix" C>
            <div class="title">Matrix A</div>

            <div class="cells" R W>
                <input class="m1r1" type="text" value="0" />
                <input class="m1r1" type="text" value="0" />
                <input class="m1r1" type="text" value="0" />
                <input class="m1r2" type="text" value="0" />
                <input class="m1r2" type="text" value="0" />
                <input class="m1r2" type="text" value="0" />
                <input class="m1r3" type="text" value="0" />
                <input class="m1r3" type="text" value="0" />
                <input class="m1r3" type="text" value="0" />
            </div>
         </div>

        <div class="tools" C>
            <div class="title">operations</div>
            <div class="operations" C>
                <input class="operation" type="button" value="A x B" onclick="mc.multiplyMatrix()" />
                <input class="operation" type="button" value="A + B" onclick="mc.addMatrix()" />
                <input class="operation" type="button" value="A - B" onclick="mc.subtractMatrix()" />
            </div>

            <div class="title">functions</div>
            <div class="functions" C>
                <input class="function" type="button" value="Determinant" onclick="mc.calculateDeterminant()" />
                <input class="function" type="button" value="Transpose" onclick="mc.transposeMatrix()" />
                <input class="function" type="button" value="Invert" onclick="mc.invertMatrix()" />
                <input class="function" type="button" value="Rank" onclick="mc.calculateRank()" />
            </div>
        </div>

        <div class="matrix" C>
            <div class="title">Matrix B</div>

            <div class="cells" R W>
                <input class="m2r1" type="text" value="0" />
                <input class="m2r1" type="text" value="0" />
                <input class="m2r1" type="text" value="0" />
                <input class="m2r2" type="text" value="0" />
                <input class="m2r2" type="text" value="0" />
                <input class="m2r2" type="text" value="0" />
                <input class="m2r3" type="text" value="0" />
                <input class="m2r3" type="text" value="0" />
                <input class="m2r3" type="text" value="0" />
            </div>
        </div>
    </div>

    <div class="lower" R>
        <textarea id="console" rows="10" wrap="soft" disabled></textarea>
    </div>
</div>