javascript - 高さの異なる div をグリッドのように配置する

Question

私は、グリッドにボックス (アイコンをドロップできる場所) が印刷され、グリッドの中央に別の種類のコンテンツ用の大きなボックスが配置されるプロジェクトに取り組んでいます。今のところ、グリッドにはコンテナ div があり、その中にはボックス div とより大きなコンテンツ div があります。それらのディスプレイはインラインブロックに設定されていますが、それは私が望んでいた方法ではありません。

これが起こります：

組積造を使用してグリッドを動的に配置しようとしましたが、何よりも多くのエラーが発生しました。別の解決策が見つからない場合は、一連のボックスを黒くして、より大きなコンテンツ div をそれらにオーバーラップさせるだけだと思います。

誰でも助けてもらえますか？ありがとう！

コード：

//Function that renders the grid used to place the icons
function renderGrid(){
    /*
    User's viewport's vars
  */
  var user_width = $(window).width();
  var user_height = $(window).height();

    /* 
    Calculating the number of columns/rows to be drawn based on the dimensions of the user's viewport
    */

    // Number of boxes horizontally counted
    var box_horizontal_number = Math.floor( (user_width - box_margin) / (box_width + box_margin) ); 

    //Number of boxes vertically counted
    var box_vertical_number = Math.floor( (user_height - box_margin) / (box_height + box_margin) );

  //Number of boxes to print - removing 8 because of the space occupied by the search box!
  var boxes_to_print_number = (box_horizontal_number * box_vertical_number) - 8;

  /*
  Drawing the grid-container on the browser
  */
  var grid_container_string = '<div class="grid-container"></div>';

  // Printing the grid-container
  $( "body" ).append( grid_container_string );

  // Calculating the width and height of the container
  var grid_width = ( box_horizontal_number * box_width ) + ( box_horizontal_number * box_margin );
  var grid_height = ( box_vertical_number * box_height ) + ( box_vertical_number * box_margin );

  //Adding css to the grid-container
  $( ".grid-container").css({
    "position": 'absolute',
    "width": grid_width,
    "height": grid_height,
    "top": '50%',
    "left": '50%',
    "margin-top": -( grid_height / 2 ),
    "margin-left": -( grid_width / 2 ),
    "z-index": '-2'
  });

    /*
    Drawing the grid on the browser
    */

    var box_string = '<div class="box"></div>';

    // Printing the box div's and the google search box:
  for(var i = 0; i < boxes_to_print_number; i++) {
    $( ".grid-container" ).append( box_string );

    if( i == ( ( ( box_horizontal_number / 2 ) * 3 ) - 3 ) ){
      //Printing the search box in the middle of the box printing
      $( ".grid-container" ).append( grid_searchbox_string );

      $( ".google-search-container").css({
        "display": 'inline-block',
        "width": grid_searchbox_width,
        "height": grid_searchbox_height,
        "background-color": grid_searchbox_color,
        "margin": ( box_margin / 2 ) + 'px ' + ( box_margin / 2 ) + 'px ' + ( box_margin / 2 ) + 'px ' + ( box_margin / 2 ) + 'px',
        "z-index": '-1'
      });
    }
  };

  // Adding the CSS to the box div's
  $( ".box").css({
    "display": 'inline-block',
    "width": box_width,
    "height": box_height,
    "background-color": box_background_color,
    "border-radius": '5px',
    "margin": ( box_margin / 2 ) + 'px ' + ( box_margin / 2 ) + 'px ' + ( box_margin / 2 ) + 'px ' + ( box_margin / 2 ) + 'px',
    "z-index": '-1'
  });

}; // End of renderGrid();

編集：いくつかのコードを追加