dynamic responsive image grid with separator - css

Question

I need to achieve the following grid(this is for desktop version):
So far I have listed the images, added the separator after each of them and tried to apply this plugin: https://github.com/brunjo/rowGrid.js to the container.
The separator is a pic too, it has to be responsive, on desktop I would need 4 in a row, but on tablet 6. Here my html so far:
<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>
Any help, idea would be appreciated, Thanks.
PS. The tablet version has to be full-width, and has to contain 6 images on one row, with the same style(separator)

Answer 1

I had a quick look at rowGrid.js, it looks like its a nice plugin to fit images into a given width, but I don't think you can constrain how many are in each row.
I've written a plugin myself: here. With it you can specify an exact layout in rows and columns which changes at given width breakpoints of the container. This will solve the basic layout grid issue. You might find some other plugins that will also do that, I imagine it would be possible with media queries too, you could for instance set the images at 25% width for the 4 across layout, and at 16.66% width for the 6 across.
The separator just needs some CSS to work properly. My plugin script creates container divs to hold each row. In this case you can do something like this:
.cross-separator:first-child { display: none }
.hs-row-container:first-child .cross-separator { display: none}
You'd need to use css to position the cross separator to the top left corner of the image.
Hope this is clear enough.