Need help with filling matrix images into CSS grid I want to fill in shuffled images into a CSS grid as a project overview. The images come from a matrix and have 4 different formats. So I want to fill in a format A image into the fitting grid cell (callA1, cellA2 ...). With my code, I have the problem, that the loop iterates over all items and fills all the A-sized cells with the same image. I would like to have image1 in cellA1 and image2 in cellA2 and image3 in cellB1 and so on.

{% for allProjects in craft.entries.section(['projekteZitate']).all() %} 
   {% set shuffledProjects = shuffle(allProjects) %}


       {% for block in shuffledProjects.projekteMatrix %}
                    {% if block.type == 'A' %}
                         {% set image = block.A.one() %}
                             {% if image %}
                              &lt;li class="cellA1"&gt; &lt;img src="{{ image.getUrl() }}"  alt="{{ image.title }}" /&gt; &lt;/li&gt;
                              {% endif %}
                    {% endif %} 

                    {% if block.type == 'A' %}
                         {% set image = block.A.one() %}
                             {% if image %}
                              &lt;li class="cellA2"&gt; &lt;img src="{{ image.getUrl() }}"  alt="{{ image.title }}" /&gt;&lt;/li&gt;
                              {% endif %}
                    {% endif %}

                    {% if block.type == 'B' %}
                         {% set image = block.A.one() %}
                             {% if image %}
                              &lt;li class="cellB1"&gt; &lt;img src="{{ image.getUrl() }}"  alt="{{ image.title }}" /&gt;&lt;/li&gt;
                              {% endif %}
                    {% endif %}
        {% endfor %}
{% endfor %}
There is no way to determine if an image should go to the first block.type == 'A' if statement or the second one

you could write something like this:

{% switch block.type %}
    {% case 'A' %}
        {# images for both case a1 + a2. write the loop number into the class name #}
        &lt;li class="cellA{{ loop.index }}"&gt; {# your image #}&lt;/li&gt;
    {% case 'B' %}
        {# images for case b #}
        &lt;li class="cellA1"&gt; {# your image #}&lt;/li&gt;
{% endswitch %}


That's just one of lots of possibilities