<p>Instead of building rows, how about building your layout with inline-block elements or flexbox elements with the flex-wrap property set, to make your elements wrap automatically.</p>

CC BY-SA 3.0
2015-11-19T12:51:53.627Z
2015-11-19T12:51:53.627Z
carlcs
<p>How about we have a matrix, with block types <code>x</code> and <code>y</code>. Then you can test for block type in your loop:</p>

<pre><code>{% for block in entry.this %}
  {% switch block.type %}
  {% case 'x' %}
    ...
  {% case 'y' %}
    ...
  {% endswitch %}
{% endfor %}
</code></pre>

<p>Another issue is that <code>33.33</code> + <code>66.66</code> = <code>99.99</code>, which is never going to be equal to <code>100</code>. (Also, the test for equality is <code>==</code>: <code>{% if x + y == 100 %}</code>). So let's use x = 1, and y = 2, for a maximum column width of 3. Here's the code:</p>

<pre><code>{% set thisRowLength = 0 %}
{% set thisBlockLength = 0 %}
&lt;div class="row"&gt;
  {% for block in entry.this %}

    {# how long is this block? #}
    {% switch block.type %}
    {% case 'x' %}
      {% set thisBlockLength = 1 %}
    {% case 'y' %}
      {% set thisBlockLength = 2 %}
    {% endswitch %}

    {# start a new row if necessary #}
    {% if thisRowLength + thisBlockLength &gt; 3 %}
      &lt;/div&gt;&lt;div class="row"&gt;
      {% thisRowLength = 0 %}
    {% endif %}

    {# now we know it fits, output this block #}
    {{ block.content }}
    {% set thisRowLength = thisRowLength + thisBlockLength %}
  {% endfor %}
&lt;/div&gt;
</code></pre>

<p>You will end up with an empty <code>&lt;div class="row"&gt;&lt;/div&gt;</code> if there are no matrix blocks. If that will be a problem, test for it.</p>

CC BY-SA 3.0
2015-11-18T23:52:05.117Z
2015-11-18T23:52:05.117Z
Marion Newlevant
<p>Okay, I want to create a Matrix based layout like this:</p>

<pre><code>| x | x | x |
| x |   y   |
|   y   | x |
</code></pre>

<p><code>X</code> is a 1/3 column and <code>Y</code> is a 2/3 column.</p>

<p>I want to activate the size <code>Y</code> with a lightswitch.</p>

<p>The problem is: If I have <code>| x | x |   y   |</code> the layout will blow up because there are too many columns so when the column amount is 3/3 I want to create a new row so all is nice and tidy.</p>

<p>How do I solve this?</p>

<p>My idea was to add a number to each column and when the maximum number is reached, there will be a new row.</p>

<p>That code doesn't work. I just want to show the idea.</p>

<pre><code>{% set x = 33.33 %}
{% set y = 66.66 %}

{% for block in entry.this %}
  {% if x + y = 100 %}&lt;div class="row"&gt;{% endif %}
    {# content #}
  {% if x + y = 100 %}&lt;/div&gt;{% endif %}

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

<p>If I can get all variables and add them up it should be possible. But how do I get the variables from each iteration.</p>

<p>Anybody know what I'm talking about? Other solutions?</p>

<templating><layout>
Determine a layout based on column number
# Determine a layout based on column number

(Asked by: username_0 on 2015-11-12)

Okay, I want to create a Matrix based layout like this:
| x | x | x |
| x |   y   |
|   y   | x |

X is a 1/3 column and Y is a 2/3 column.
I want to activate the size Y with a lightswitch.
The problem is: If I have | x | x |   y   | the layout will blow up because there are too many columns so when the column amount is 3/3 I want to create a new row so all is nice and tidy.
How do I solve this?
My idea was to add a number to each column and when the maximum number is reached, there will be a new row.
That code doesn't work. I just want to show the idea.
{% set x = 33.33 %}
{% set y = 66.66 %}

{% for block in entry.this %}
  {% if x + y = 100 %}{% endif %}
    {# content #}
  {% if x + y = 100 %}{% endif %}

{% endfor %}

If I can get all variables and add them up it should be possible. But how do I get the variables from each iteration.
Anybody know what I'm talking about? Other solutions?

**Tags:** templating, layout

---

## 2 answers

### Answer by username_2 on 2015-11-18. Score: 4 | Accepted answer

How about we have a matrix, with block types x and y. Then you can test for block type in your loop:
{% for block in entry.this %}
  {% switch block.type %}
  {% case 'x' %}
    ...
  {% case 'y' %}
    ...
  {% endswitch %}
{% endfor %}

Another issue is that 33.33 + 66.66 = 99.99, which is never going to be equal to 100. (Also, the test for equality is ==: {% if x + y == 100 %}). So let's use x = 1, and y = 2, for a maximum column width of 3. Here's the code:
{% set thisRowLength = 0 %}
{% set thisBlockLength = 0 %}

  {% for block in entry.this %}

    {# how long is this block? #}
    {% switch block.type %}
    {% case 'x' %}
      {% set thisBlockLength = 1 %}
    {% case 'y' %}
      {% set thisBlockLength = 2 %}
    {% endswitch %}

    {# start a new row if necessary #}
    {% if thisRowLength + thisBlockLength > 3 %}
      
      {% thisRowLength = 0 %}
    {% endif %}

    {# now we know it fits, output this block #}
    {{ block.content }}
    {% set thisRowLength = thisRowLength + thisBlockLength %}
  {% endfor %}


You will end up with an empty  if there are no matrix blocks. If that will be a problem, test for it.


---

### Answer by username_1 on 2015-11-19. Score: 2

Instead of building rows, how about building your layout with inline-block elements or flexbox elements with the flex-wrap property set, to make your elements wrap automatically.


---

