使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();

编辑：添加了一些代码