<pre><code>{% for batch in block.images|batch(3) %}
  &lt;div class="row"&gt;
  {% for image in batch %}
    &lt;div class="column"&gt;
      &lt;img src="{{ image.url }}" alt=""&gt;
    &lt;/div&gt;
  {% endfor %}
  &lt;/div&gt;
{% endfor %}
</code></pre>

CC BY-SA 3.0
2018-01-15T10:31:02.023Z
2018-01-15T10:31:02.023Z
Fuglsetrampen
<p>I have images in matrix block 
I want to display in grid format 
Each raw will have three column.</p>

<p>Images 1   images 2  image2
Images 4  images4  image 4</p>

<p>I tried to used batch filter but did not work with matrix block.</p>

<pre><code> {% for block in entry.profilematrix %}
{% switch block.type %}

{% case "profilebuilder" %}

{% set debfilter = block.department %}

        {# use the variable to filter the entries #}

        {% if block.department == craft.request.lastSegment   %}






                 {% for image in block.uploadImageProfile %} 




             {% endfor %}

        {% endif %}

 {% endfor %}

  {% endfor %}
</code></pre>

CC BY-SA 3.0
2018-01-11T16:15:51.613Z
Unless you receive a twig error this question has nothing to do with Craft since your html might be broken (you open `<divs>` but you might not close them properly) so it is related to html/css. You should tell us what your problem is otherwise we have to guess what is wrong. Maybe you could explain your issue a little bit better? What works/what does not work?
Robin Schambach
CC BY-SA 3.0
2018-01-11T16:41:01.623Z
thanks for the prompt reply.  can you tell me how i can use the batch filter in this line a  {% for image in block.uploadImageProfile %}  and display  images in three clumn in each row.
youme
CC BY-SA 3.0
2018-01-11T19:16:50.850Z
There is actually no need for a batch filter if you have good css. As it seems this question is more about css than about Craft. You should ask about how to create a responsive grid without rows. Like that https://css-tricks.com/things-ive-learned-css-grid-layout/#article-header-id-6
Robin Schambach
CC BY-SA 3.0
2018-01-15T10:17:49.740Z
Sorted. I used variable to count the matrix blocks in the loop. {% set rows = 0 %} {% if rows == 3 %}
                                    </div>
                                    <div class="row">
                                    {% set rows = 0 %}
                                {% endif %}         only css  clound not create the grid
youme
<matrix>
Display images in Matrix block in grid view
# Display images in Matrix block in grid view

(Asked by: username_0 on 2018-01-11)

I have images in matrix block 
I want to display in grid format 
Each raw will have three column.
Images 1   images 2  image2
Images 4  images4  image 4
I tried to used batch filter but did not work with matrix block.
 {% for block in entry.profilematrix %}
{% switch block.type %}

{% case "profilebuilder" %}

{% set debfilter = block.department %}

        {# use the variable to filter the entries #}

        {% if block.department == craft.request.lastSegment   %}






                 {% for image in block.uploadImageProfile %} 




             {% endfor %}

        {% endif %}

 {% endfor %}

  {% endfor %}

**Tags:** matrix
> **Comments:**
> **username_1**: Unless you receive a twig error this question has nothing to do with Craft since your html might be broken (you open `<divs>` but you might not close them properly) so it is related to html/css. You should tell us what your problem is otherwise we have to guess what is wrong. Maybe you could explain your issue a little bit better? What works/what does not work?  
> **username_0**: thanks for the prompt reply.  can you tell me how i can use the batch filter in this line a  {% for image in block.uploadImageProfile %}  and display  images in three clumn in each row.  
> **username_1**: There is actually no need for a batch filter if you have good css. As it seems this question is more about css than about Craft. You should ask about how to create a responsive grid without rows. Like that https://css-tricks.com/things-ive-learned-css-grid-layout/#article-header-id-6  
> **username_0**: Sorted. I used variable to count the matrix blocks in the loop. {% set rows = 0 %} {% if rows == 3 %}                                     </div>                                     <div class="row">                                     {% set rows = 0 %}                                 {% endif %}         only css  clound not create the grid  

---

## 1 answers

### Answer by username_2 on 2018-01-15. Score: 1

{% for batch in block.images|batch(3) %}
  
  {% for image in batch %}
    
      
    
  {% endfor %}
  
{% endfor %}


---

