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

Question

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

到目前为止，我已经列出了图像，在每个图像之后添加了分隔符并尝试将此插件：https://github.com/brunjo/rowGrid.js 应用于容器。 分隔符也是一张图片，它必须是响应式的，在桌面上我需要连续 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>

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

附言。平板版必须是全角的，并且必须在一行中包含6张图片，并且样式相同（分隔符）

Answer 1

我快速浏览了 rowGrid.js，它看起来是一个很好的插件，可以将图像调整到给定的宽度，但我认为您不能限制每行中有多少。

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

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

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

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

希望这已经足够清楚了。