<p>It wasn't a CSS issue. Lack of twig knowledge. Here is the final fix.</p>

<pre><code>    {% case 'pageRelatedContent' %}
{% set relatedContentBlocks = entry.memberCommunicationsPageContent.type('pageRelatedContent') %}
{% if entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 1 %}
    {% set colSize = 12 %}
{% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 2 %}
    {% set colSize = 6 %}
{% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 3 %}
    {% set colSize = 4 %}
{% endif %}
    {% set isFirst = not block.getPrev() or block.getPrev().type != 'pageRelatedContent' %}
        {% if isFirst %}
            &lt;div class="section-empty section-item"&gt;
                &lt;div class="container content"&gt;
                    &lt;div class="row"&gt;
        {% endif %}
        {% set relatedBlockInfo = relatedContentBlocks|batch(colSize) %}
        {% for blocks in relatedBlockInfo %}
        &lt;div class="col-md-{{ colSize }}"&gt;
            &lt;div class="list-group accordion-list"&gt;
                &lt;div class="list-group-item active-panel"&gt;
                    &lt;a href="#" class="active"&gt; {{ block.relatedContentTitle }}&lt;/a&gt;
                    &lt;div class="panel" style="display: block; height: 182px;"&gt;
                        &lt;div class="inner"&gt;
                            &lt;ul class="list-texts text-left"&gt;
                                {% for row in block.relatedLinkInformation %}
                                &lt;li&gt;&lt;a href="{{row.linkUrl }}"&gt;{{ row.linkTitle }}&lt;/a&gt;&lt;/li&gt;
                                {% endfor %}
                            &lt;/ul&gt;  
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        {% endfor %}
    {% set isLast = not block.getNext() or block.getNext().type !='pageRelatedContent' %}
        {% if isLast %}
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        {% endif %}
</code></pre>

CC BY-SA 4.0
2018-08-31T18:24:27.233Z
2018-08-31T18:24:27.233Z
Jason
<p>I have a matrix with a block type call pageRelatedContent. A user can add multiple block to their entry. I am trying to put all the pageRelatedContent blocks in one div row. For this example, I have three pageRelatedContent blocks in this entry. My code is generating three separate rows. Its a coding thing that I am missing. Can someone please assist.</p>

<p>Here is the rendered HTML:
<a href="https://i.sstatic.net/moX7s.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/moX7s.png" alt="enter image description here"></a></p>

<p>Here is the desired output:
<a href="https://i.sstatic.net/XmZKa.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/XmZKa.png" alt="enter image description here"></a></p>

<p>Here is my code. I can see that it is creating a row for every block, but I can't seem to figure out how to insert all the block in one row.</p>

<pre><code>    {% case 'pageRelatedContent' %}
{% set relatedContentBlocks = entry.memberCommunicationsPageContent.type('pageRelatedContent') %}
{% if entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 1 %}
    {% set colSize = 12 %}
{% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 2 %}
    {% set colSize = 6 %}
{% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 3 %}
    {% set colSize = 4 %}
{% endif %}
    &lt;div class="section-empty section-item"&gt;
        &lt;div class="container content"&gt;
            &lt;div class="row"&gt;
                {% set relatedBlockInfo = relatedContentBlocks|batch(colSize) %}
                {% for blocks in relatedBlockInfo %}
                &lt;div class="col-md-{{ colSize }}"&gt;
                    &lt;div class="list-group accordion-list"&gt;
                        &lt;div class="list-group-item active-panel"&gt;
                            &lt;a href="#" class="active"&gt; {{ block.relatedContentTitle }}&lt;/a&gt;
                            &lt;div class="panel" style="display: block; height: 182px;"&gt;
                                &lt;div class="inner"&gt;
                                    &lt;ul class="list-texts text-left"&gt;
                                        {% for row in block.relatedLinkInformation %}
                                        &lt;li&gt;&lt;a href="{{row.linkUrl }}"&gt;{{ row.linkTitle }}&lt;/a&gt;&lt;/li&gt;
                                        {% endfor %}
                                    &lt;/ul&gt;  
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                {% endfor %}
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>Here is the matrix information:
<a href="https://i.sstatic.net/nf1kS.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/nf1kS.png" alt="enter image description here"></a></p>

CC BY-SA 4.0
2018-08-31T17:44:23.067Z
I'm voting to close this question as off-topic because it's not really a Craft question, this is a CSS question. `.col-md-{{ colSize }}` needs to be floated and have its width set to a third of the width of `.row`. Looking up info on CSS grids (maybe on Stack Overflow) will point you in the right direction.
Simon Kuran
CC BY-SA 4.0
2018-08-31T17:49:57.303Z
How is this a CSS issues. For every block, it is generating the case code. There has to be some for of twig code that will not rewrite the row everytime it runs through the case.
Jason
CC BY-SA 4.0
2018-08-31T18:09:22.190Z
Personally I'd adjust my CSS and HTML to change the layout. I find that cleaner. But you could check what the next matrix block is and conditionally add HTML. Something like this: https://craftcms.stackexchange.com/questions/1745/identify-immediate-siblings-block-type-in-matrix/1747#1747
Simon Kuran
<craft3><matrix>
Inserting Multiple Block Types in one div row
# Inserting Multiple Block Types in one div row

(Asked by: username_0 on 2018-08-31)

I have a matrix with a block type call pageRelatedContent. A user can add multiple block to their entry. I am trying to put all the pageRelatedContent blocks in one div row. For this example, I have three pageRelatedContent blocks in this entry. My code is generating three separate rows. Its a coding thing that I am missing. Can someone please assist.
Here is the rendered HTML:

Here is the desired output:

Here is my code. I can see that it is creating a row for every block, but I can't seem to figure out how to insert all the block in one row.
    {% case 'pageRelatedContent' %}
{% set relatedContentBlocks = entry.memberCommunicationsPageContent.type('pageRelatedContent') %}
{% if entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 1 %}
    {% set colSize = 12 %}
{% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 2 %}
    {% set colSize = 6 %}
{% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 3 %}
    {% set colSize = 4 %}
{% endif %}
    
        
            
                {% set relatedBlockInfo = relatedContentBlocks|batch(colSize) %}
                {% for blocks in relatedBlockInfo %}
                
                    
                        
                             {{ block.relatedContentTitle }}
                            
                                
                                    
                                        {% for row in block.relatedLinkInformation %}
                                        {{ row.linkTitle }}
                                        {% endfor %}
                                      
                                
                            
                        
                    
                
                {% endfor %}
            
        
    

Here is the matrix information:

**Tags:** craft3, matrix
> **Comments:**
> **username_1**: I'm voting to close this question as off-topic because it's not really a Craft question, this is a CSS question. `.col-md-{{ colSize }}` needs to be floated and have its width set to a third of the width of `.row`. Looking up info on CSS grids (maybe on Stack Overflow) will point you in the right direction.  
> **username_0**: How is this a CSS issues. For every block, it is generating the case code. There has to be some for of twig code that will not rewrite the row everytime it runs through the case.  
> **username_1**: Personally I'd adjust my CSS and HTML to change the layout. I find that cleaner. But you could check what the next matrix block is and conditionally add HTML. Something like this: https://craftcms.stackexchange.com/questions/1745/identify-immediate-siblings-block-type-in-matrix/1747#1747  

---

## 1 answers

### Answer by username_0 on 2018-08-31. Score: 2

It wasn't a CSS issue. Lack of twig knowledge. Here is the final fix.
    {% case 'pageRelatedContent' %}
{% set relatedContentBlocks = entry.memberCommunicationsPageContent.type('pageRelatedContent') %}
{% if entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 1 %}
    {% set colSize = 12 %}
{% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 2 %}
    {% set colSize = 6 %}
{% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 3 %}
    {% set colSize = 4 %}
{% endif %}
    {% set isFirst = not block.getPrev() or block.getPrev().type != 'pageRelatedContent' %}
        {% if isFirst %}
            
                
                    
        {% endif %}
        {% set relatedBlockInfo = relatedContentBlocks|batch(colSize) %}
        {% for blocks in relatedBlockInfo %}
        
            
                
                     {{ block.relatedContentTitle }}
                    
                        
                            
                                {% for row in block.relatedLinkInformation %}
                                {{ row.linkTitle }}
                                {% endfor %}
                              
                        
                    
                
            
        
        {% endfor %}
    {% set isLast = not block.getNext() or block.getNext().type !='pageRelatedContent' %}
        {% if isLast %}
                
            
        
        {% endif %}


---

