Javascript在流体网格中的当前行下方插入元素

小提琴-

我正在用纯JS构建一个简单的网格布局。网格现在由16个“瓦片”组成，但稍后会增长。网站的设计响应迅速，因此网格可以从8x1流畅地调整到2x8，请参见所附图片。
现在我要做的是，如果单击其中一个互动程序，则显示一个附加容器。
这个容器是100%宽的，因此它显然应该显示在网格中当前行的下方。我可以用一个巨大的嵌套开关盒来解决这个问题，硬编码瓷砖位置的所有范围。但我认为一定有办法解决这个问题

正如您在图中所看到的，网格的大小是通过断点调整的。我想在一行的最后一个元素之后插入我的库容器。

在脚本中，我对可用列数使用了一个开关大小写。但我离这里不远了

// ...
switch (columns_currently_shown) {
    case 1:
        place_after_number = current_element;
        break;
    case 2:
        // ???
        break;
    case 3:
        // ???
        break;
    case 4:
        // ???
        break;
    }
  var place_after_this = document.getElementById("tile" + place_after_number);
  insertAfter(place_after_this, gallery_element_to_insert);
}

请不要建议我使用jQuery。我知道这会使很多事情变得更简单，或者我可以使用库。但我试着学习JS，并想这样做：）

Edit:--bump--如果有人在这篇文章中读到的不仅仅是“网格”这个词，这将是很有帮助的。