定义一个响应方格

Question

我在执行CSS任务时需要帮助。我已完成以下设置：

function ind2sub(siz,ind){
    rowsub = Math.floor(ind/siz[1])
    colsub = ind % siz[1]
    return [rowsub,colsub]
}
function sub2ind(siz,rowsub,colsub){
    return siz[1]*Math.floor(rowsub)+Math.floor(colsub)
}

    var rows = 7
    var cols = 7
    for(i = 0;i<rows*cols;i++){
        var probe = $('<span data-id="'+i+'" data-selected="0" class="probe" style="font-size:6px;">'+i+'</span>')
          $('#mcuframe').append(probe)
    }
    ind = sub2ind([rows,cols],rows/2,cols/2)
    $('#mcuframe .probe[data-id="' + ind +'"]').addClass("fieldselected")//.css("background-color","lightblue")

    rows = 14
    cols = 19
    for(i = 0;i<rows*cols;i++){
        var sample = $('<span data-id="'+i+'" data-selected="0" class="sample" style="font-size:6px;">'+i+'</span>')
          $('#fovframe').append(sample)
    }
    ind = sub2ind([rows,cols],rows/2,cols/2)
    $('#fovframe .sample[data-id="'+ind+'"]').addClass("fieldselected")//css("background-color","lightblue")
    
    $('.probe,.sample').click(function(){
        if($(this).hasClass('probe')){
            $('.probe').removeClass('fieldselected')
            $(this).addClass("fieldselected")
        }
        else if($(this).hasClass('sample')){
            $('.sample').removeClass('fieldselected')
            $(this).addClass("fieldselected")
        }
    });
    
    $('#move2samplebtn').click(function () {
        /*if ($('#con_mcu_tgl').prop("checked") == false) {
            return
        }*/
        var probeidx = ind2sub([7,7], $('.probe.fieldselected').data('id'))
        var sampleidx = ind2sub([14,19], $('.sample.fieldselected').data('id'))
        
    });

#mcuframe {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-gap: 2px;
  background-color: black;
  border: solid 2px black;
}

#mcuframe .probe {
  background-color: white;
  cursor: pointer;
}
#mcuframe .probe:hover{
  background-color: gray;
}

#mcuframe .probe::before {
  content: "";
  padding-top: 100%;
  float: left;
  width: 0;
  height: 0;
  box-sizing: content-box;
}

#fovframe {
  display: grid;
  grid-template-columns: repeat(19, 1fr);
  grid-template-rows: repeat(14, 1fr);
  grid-gap: 2px;
  background-color: black;
  border: solid 2px black;
}

#fovframe .sample {
  background-color: white;
  cursor: pointer;
}
#fovframe .sample:hover{
  background-color: gray;
}

#fovframe .sample::before {
  content: "";
  padding-top: calc(100% / 19 * 14);
  float: left;
  width: 0;
  height: 0;
}
.fieldselected{
  background-color:lightblue !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
  <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Dashboard</h1>
  </div>
  <div class="container" style="padding: 0px; margin: 0px;">
    <div class="row" style="padding: 0px; margin: 0px;">
      <div class="col-lg-9">
        <ul class="nav nav-tabs" role="tablist" id="controltabs">
          <li class="nav-item">
            <a class="nav-link" href="#movpanel" role="tab" data-toggle="tab">
              <i class="fa fa-arrows-alt"></i>
            </a>
          </li>
        </ul>

        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="movpanel">
            <div class="card">
              <div class="card-header">
                Move panel
              </div>
              <div class="card-body">
              
                      <div style="width: 48%; float:left">
                        <h4>1) Choose probe</h4>
                        <div id="mcuframe"></div>
                      </div>

                      <div style="width: 48%; float:right">
                        <h4>2) Choose sample </h4>
                        <div id="fovframe"></div>
                      </div>

                      <div class="clearfix"></div>

                      <div class="row no-gutters mt-4">
                        <div class="col">
                          <button class="btn btn-success col-12" id="move2samplebtn">
                            Move to chosen sample
                          </button>
                        </div>
                      </div>
                      
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
    </div>
  </div>

这有点奏效，但我的问题主要是2）下的周围框架不是正方形，而且文本在较小的屏幕上破坏了周围的容器。 1）和2）下的两个框架都应始终为正方形，并且具有相同的大小，而不管窗口大小如何（响应式设计）。另外，如果我水平或垂直更改网格单元的数量，或者同时更改两者，则应在与上述相同的条件下保持正方形。当任一方向的框数发生变化时，框内的框都需要更改长宽比。我尝试使用小提琴中所示的css网格方法，但是这样做没有达到我的预期。由于网格不保持正方形，我在这里怎么办？