<p>Judging from your code it looks like you are struggling with one of Matrix's limitations. Nesting. I have seen, and used, a number of hacks to get around this until I stumbled upon the Neo plugin. I, in fact, use it exclusively for this kind of thing; Bootstrap's and Foundation's rows and columns.... or any other flex grid system for that matter.</p>

<p>So this answer's kinda a non answer because I am going to point you in another direction to achieve Foundations Block Grid.</p>

<p>Because Neo can nest and the code is very similar to a structure using levels, you can do something like this for Foundation's Block Grid.</p>

<pre><code>{% for row in entry.neoField.level(1) %}

  {% for column in row.children %}
    {% if loop.first %}&lt;div class="row small-up-1 medium-up-{{ loop.total }}"&gt;{% endif %}
        &lt;div class="column"&gt;
            {% for field in column.children %}
            stuff... (use your switch code or I prefer per-field includes)
            {% endfor %}
        &lt;/div&gt;
    {% if loop.last %}&lt;/div&gt;{% endif %}
 {% endfor %}

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

<p>Will output</p>

<pre><code>   &lt;div class="row small-up-1 medium-up-3"&gt;
     &lt;div class="column"&gt;
       &lt;img src="//placehold.it/300x300"&gt;
     &lt;/div&gt;
     &lt;div class="column"&gt;
       &lt;img src="//placehold.it/300x300"&gt;
     &lt;/div&gt;
     &lt;div class="column"&gt;
       &lt;img src="//placehold.it/300x300"&gt;
     &lt;/div&gt;
   &lt;/div&gt;
</code></pre>

<p>So in Neo I have a top level block called "Row". It has no fields, but it could, you can make it as complicated as you want adding class, background etc. This row block can only have one type of child block called "Column" again, no fields if you don't want. This "Column" block can have any number of child blocks including photo, text, video(even a Row! Inception!). For each row you add, you can have as many columns you want(zurb block grid only works to 8). The total amount of columns you add gets added to the <code>medium-up-3</code> per the <code>{{ loop.total }}</code>.</p>

<p><a href="https://github.com/benjamminf/craft-neo" rel="nofollow">Neo Field</a></p>

<p>Note: The code above is a simplified version. Doing the Row > Column > Row works, but the code's a little more complicated.</p>

CC BY-SA 3.0
2016-09-21T17:02:33.613Z
Thats great I will check out Neo, can see it coming in very handy for user-interface semantics too
user2569
CC BY-SA 3.0
2016-09-20T23:44:36.043Z
2016-09-21T00:09:49.540Z
2016-09-21T00:09:49.540Z
AbbeyDesign
<p>I'm using Zurb foundation's Block Grid and using this in a matrix field where users can (using a block called 'wrapper') add a row and define the number of columns which appear side by side across a desktop device in that row, then using another block 'textBlocks' add divs of text within the row. I also want to add an option of 'fullwidth' a lightswitch field in the 'wrapper' block, so if this is selected then the 'following' will wrap around the row:</p>

<pre><code>&lt;div class="fullwidth"&gt;
…row/text content
&lt;/div&gt;
</code></pre>

<p>but I can't seem to add the closing  in the right place (at the end of the row), code below:</p>

<pre><code>{% set isWrapperOpen = false %}
{% for block in entry.pagedesigner %}

  {% switch block.type %}

    {% case "wrapper" %}


      {% if block['fullwidth'] is defined %}&lt;div class="fullwidth"&gt;{% endif %}
      {% if isWrapperOpen %}&lt;/div&gt;{% endif %}

      &lt;div class="row large-up-{{ block.columns }}"&gt;
      {% set isWrapperOpen = true %}
      {{ block.heading }}

    {% case "textBlocks" %}
        &lt;div class="column"&gt; 
          {{ block.text }}      
        &lt;/div&gt; 

  {% endswitch %}

  {% if loop.last and isWrapperOpen %}&lt;/div&gt;{% endif %}



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

<p>pic added of Publish page
<a href="https://i.sstatic.net/qUwhg.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/qUwhg.png" alt="Matrix publish page"></a></p>

<p>Appreciate semantics need some work but need to figure logic first</p>

<p>UPDATE I've since chatted with Andrew Fairlie from Mutual and got this working (with his guidance) excuse the crude inline styles – just helps aid making visual sense to me :)</p>

<p>{% set isWrapperOpen = false %}
{% set isFullWrapperWidthOpen = false %}
{% for block in entry.pageDesigner %}</p>

<p>{% switch block.type %}</p>

<pre><code>{% case "wrapper" %}
 {# Close the previous fullwidth wrapper before we open a new one #}
  {% if isFullWrapperWidthOpen %}&lt;/div&gt;{% endif %}
  {# Close the previous wrapper before we open a new one #}
  {% if isWrapperOpen %}&lt;/div&gt;{% endif %}


  {% if block.fullWidth %}
    {% set isFullWrapperWidthOpen = true %}
     &lt;div class="row expanded" style="background-color: red; margin-bottom: 30px;"&gt;
     {% else %}
       {% set isFullWrapperWidthOpen = false %}
    {% endif %}


  &lt;div class="row large-up-{{ block.columns }}"&gt;
  {% set isWrapperOpen = true %}

  {% case "heading" %}
   &lt;h2  style="background-color: blue;" class="column text-{{ block.position }} heading heading--{{ block.size }}"&gt;
    {{ block.text }}
   &lt;/h2&gt;     


  {% case "textBlocks" %}
    &lt;div class="column" style="background-color: yellow;"&gt; 
      {{ block.text }}      
    &lt;/div&gt;  
</code></pre>

<p>{% endswitch %}</p>

<p>{# If we're on the last block, close up the last wrapper div #}
  {% if loop.last and isWrapperOpen %}{% endif %}
  {% if loop.last and isFullWrapperWidthOpen %}**{% endif %}
{% endfor %}</p>

<matrix>
Checking if matrix lightswitch is true, and add wrapper div
# Checking if matrix lightswitch is true, and add wrapper div

(Asked by: username_0 on 2016-09-20)

I'm using Zurb foundation's Block Grid and using this in a matrix field where users can (using a block called 'wrapper') add a row and define the number of columns which appear side by side across a desktop device in that row, then using another block 'textBlocks' add divs of text within the row. I also want to add an option of 'fullwidth' a lightswitch field in the 'wrapper' block, so if this is selected then the 'following' will wrap around the row:

…row/text content


but I can't seem to add the closing  in the right place (at the end of the row), code below:
{% set isWrapperOpen = false %}
{% for block in entry.pagedesigner %}

  {% switch block.type %}

    {% case "wrapper" %}


      {% if block['fullwidth'] is defined %}{% endif %}
      {% if isWrapperOpen %}{% endif %}

      
      {% set isWrapperOpen = true %}
      {{ block.heading }}

    {% case "textBlocks" %}
         
          {{ block.text }}      
         

  {% endswitch %}

  {% if loop.last and isWrapperOpen %}{% endif %}



{% endfor %}

pic added of Publish page

Appreciate semantics need some work but need to figure logic first
UPDATE I've since chatted with Andrew Fairlie from Mutual and got this working (with his guidance) excuse the crude inline styles – just helps aid making visual sense to me :)
{% set isWrapperOpen = false %}
{% set isFullWrapperWidthOpen = false %}
{% for block in entry.pageDesigner %}
{% switch block.type %}
{% case "wrapper" %}
 {# Close the previous fullwidth wrapper before we open a new one #}
  {% if isFullWrapperWidthOpen %}{% endif %}
  {# Close the previous wrapper before we open a new one #}
  {% if isWrapperOpen %}{% endif %}


  {% if block.fullWidth %}
    {% set isFullWrapperWidthOpen = true %}
     
     {% else %}
       {% set isFullWrapperWidthOpen = false %}
    {% endif %}


  
  {% set isWrapperOpen = true %}

  {% case "heading" %}
   
    {{ block.text }}
        


  {% case "textBlocks" %}
     
      {{ block.text }}      
      

{% endswitch %}
{# If we're on the last block, close up the last wrapper div #}
  {% if loop.last and isWrapperOpen %}{% endif %}
  {% if loop.last and isFullWrapperWidthOpen %}**{% endif %}
{% endfor %}

**Tags:** matrix

---

## 1 answers

### Answer by username_1 on 2016-09-20. Score: 2 | Accepted answer

Judging from your code it looks like you are struggling with one of Matrix's limitations. Nesting. I have seen, and used, a number of hacks to get around this until I stumbled upon the Neo plugin. I, in fact, use it exclusively for this kind of thing; Bootstrap's and Foundation's rows and columns.... or any other flex grid system for that matter.
So this answer's kinda a non answer because I am going to point you in another direction to achieve Foundations Block Grid.
Because Neo can nest and the code is very similar to a structure using levels, you can do something like this for Foundation's Block Grid.
{% for row in entry.neoField.level(1) %}

  {% for column in row.children %}
    {% if loop.first %}{% endif %}
        
            {% for field in column.children %}
            stuff... (use your switch code or I prefer per-field includes)
            {% endfor %}
        
    {% if loop.last %}{% endif %}
 {% endfor %}

{% endfor %}

Will output
   
     
       
     
     
       
     
     
       
     
   

So in Neo I have a top level block called "Row". It has no fields, but it could, you can make it as complicated as you want adding class, background etc. This row block can only have one type of child block called "Column" again, no fields if you don't want. This "Column" block can have any number of child blocks including photo, text, video(even a Row! Inception!). For each row you add, you can have as many columns you want(zurb block grid only works to 8). The total amount of columns you add gets added to the medium-up-3 per the {{ loop.total }}.
Neo Field
Note: The code above is a simplified version. Doing the Row > Column > Row works, but the code's a little more complicated.

> **Comments:**
> **username_0**: Thats great I will check out Neo, can see it coming in very handy for user-interface semantics too  

---

