带分隔符的动态响应图像网格

Question

我需要实现以下网格（这适用于桌面版）：

到目前为止，我已经列出了图像，在每个图像之后添加了分隔符并尝试将此插件https://github.com/brunjo/rowGrid.js应用于容器。 分隔符也是pic，它必须是响应，在桌面上我需要连续4个，但在平板电脑6.这里我的HTML到目前为止：

<div id="competences">
    {% for competence in competences %}
      <div class="item-c">
          <a href="">
              <img src="/uploads/competence/{{ competence.logo }}" alt="{{ competence.name }}">
          </a>
          <img src="{{ asset('bundles/aeliusfront/images/competencies_separator.png') }}" class="cross_separator">
      </div> 
    {% endfor %}
</div>

任何帮助，想法都将不胜感激，谢谢。

PS。平板电脑版本必须是全宽的，并且必须在一行中包含6个图像，具有相同的样式（分隔符）

Answer 1

我快速浏览了一下rowGrid.js，看起来它是一个很好的插件，可以将图像放到给定的宽度中，但我不认为你可以约束每行中的数量。

我自己写了一个插件：here。使用它，您可以指定行和列中的精确布局，这些布局在容器的给定宽度断点处更改。这将解决基本布局网格问题。您可能会发现其他一些插件也会这样做，我想也可以使用媒体查询，例如，您可以为4个跨布局设置25％宽度的图像，并为6跨设置16.66％宽度。

分隔符只需要一些CSS才能正常工作。我的插件脚本创建容器div来保存每一行。在这种情况下，您可以执行以下操作：

.cross-separator:first-child { display: none }
.hs-row-container:first-child .cross-separator { display: none}

您需要使用css将交叉分隔符定位到图像的左上角。

希望这很清楚。