响应式网格视图计数

Question

我正在制作一个Grid视图，该视图响应需要多少列。我在下面创建了一个简单的绘画作为参考。（对不起，我很讨厌绘画）。例如，我需要2列的网格视图，因此它将在上方显示1列，在下方显示1列，但对于3列，它将显示在上方2列和下方1列。我的问题是我创建的逻辑似乎不太好或不正确，因为列出了所有列，并且当我尝试更改网格大小时，默认大小仍保持不变

Check Fiddle Here

   //HTML
<div class="buttoncontainer">
     <input id="term" type="text" value="1" />
      <button id="btn-grid"> Click Grid view
      </button>
    </div>
    </div>
    <div class="container">
      <div class="row">
          <div id="grid-chart-1" class="column"></div>
                <div id="grid-chart-2" class="column"></div>
                <div id="grid-chart-3" class="column"></div>
                <div id="grid-chart-4" class="column"></div>
                <div id="grid-chart-5" class="column"></div>
                <div id="grid-chart-6" class="column"></div>
                <div id="grid-chart-7" class="column"></div>
                <div id="grid-chart-8" class="column"></div>
      </div>
    </div>

function gridsetup(data){
  switch(data){
              //2 chart
              case 2 :
                  $("#grid-chart-1").addClass("col-12");
                  $("#grid-chart-2").addClass("col-12");
              break;
              // 3 chart
              case 3 :
                  $("#grid-chart-1").addClass("col-6");
                  $("#grid-chart-2").addClass("col-6");
                  $("#grid-chart-3").addClass("col-12");
              break;
              //4 chart
              case 4 :
                  $("#grid-chart-1").addClass("col-6");
                  $("#grid-chart-2").addClass("col-6");
                  $("#grid-chart-3").addClass("col-6");
                  $("#grid-chart-4").addClass("col-6");
              break;
              case 5 :
                  $("#grid-chart-1").addClass("col-6");
                  $("#grid-chart-2").addClass("col-6");
                  $("#grid-chart-3").addClass("col-6");
                  $("#grid-chart-4").addClass("col-3");
                  $("#grid-chart-4").addClass("col-3");
              break;
              case 6 :
                  $("#grid-chart-1").addClass("col-6");
                  $("#grid-chart-2").addClass("col-6");
                  $("#grid-chart-3").addClass("col-3");
                  $("#grid-chart-4").addClass("col-3");
                  $("#grid-chart-5").addClass("col-3");
                  $("#grid-chart-6").addClass("col-3");
              break;
              case 7 :
                  $("#grid-chart-1").addClass("col-6");
                  $("#grid-chart-2").addClass("col-3");
                  $("#grid-chart-3").addClass("col-3");
                  $("#grid-chart-4").addClass("col-3");
                  $("#grid-chart-5").addClass("col-3");
                  $("#grid-chart-6").addClass("col-3");
                  $("#grid-chart-7").addClass("col-3");
              case 8 :
                  $("#grid-chart-1").addClass("col-3");
                  $("#grid-chart-2").addClass("col-3");
                  $("#grid-chart-3").addClass("col-3");
                  $("#grid-chart-4").addClass("col-3");
                  $("#grid-chart-5").addClass("col-3");
                  $("#grid-chart-6").addClass("col-3");
                  $("#grid-chart-7").addClass("col-3");
                  $("#grid-chart-8").addClass("col-3");
              break;

  }
 }


var number = $("#term").val();
  $('#btn-grid').click(function() {
    gridsetup(number);
  });