CSS网格-检查网格行是否有空单元格并填充

Question

我无法为以下问题找到解决方案：

我创建了一个网格布局（每行320px），最多4行，并通过媒体查询更改行。

.container {
    display: grid;
    grid-template-columns: 320px;
    grid-template-rows: 50px;
    grid-auto-rows: 50px;
    grid-column-gap: 20px;
    grid-row-gap: 4px;
    grid-auto-flow: row dense;
}

我正在用API的内容填充此容器。填充到容器中的div具有两个不同的大小（320px x 300px）或（660px x 300px）。就像带有无限滚动的砌体布局一样。通过设计，根据内容的不同，有时版面之间会存在间隙。

我的问题是：如何检查网格行是否为空并填写占位符div（公司徽标，...）。

谢谢。

编辑：添加图像以显示问题

Answer 1

你是这个意思吗？

$(".container").each(function(index, el) {
  if ($(el).is(':empty')) $(el).html("is empty");
})

.container {
  display: grid;
  grid-template-columns: 320px;
  grid-template-rows: 50px;
  grid-auto-rows: 50px;
  grid-column-gap: 20px;
  grid-row-gap: 4px;
  grid-auto-flow: row dense;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>
<div class="container">test</div>
<div class="container">test</div>
<div class="container"></div>
<div class="container">test</div>

Answer 2

例如，您可以使用JQuery检查开发人员是否为空

if ($('.classNameOne').html() == "") {
   //Do something useful here
});