Отзывчивый Сетка Количество просмотров

Question

Я делаю Grid-представление, которое учитывает, сколько столбцов необходимо.Я создал простую краску ниже для справки. (Извините, я отстой в краске).Например, мне нужно представление сетки для 2 столбцов, поэтому он будет отображать 1 столбец выше и 1 ниже, но для 3 столбцов это будет 2 столбца выше и 1 столбец ниже.Моя проблема заключается в том, что созданная мною логика кажется не совсем хорошей или неправильной, потому что все столбцы перечислены, и когда я пытаюсь изменить размер сетки, размер по умолчанию остается неизменным

Проверка скрипта здесь

   //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);
  });