Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-11-19T12:51:53.627Z
Answers.LastActivityDate: 2015-11-19T12:51:53.627Z
Answers.UserDisplayName: carlcs
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-11-18T23:52:05.117Z
Answers.LastActivityDate: 2015-11-18T23:52:05.117Z
Answers.UserDisplayName: Marion Newlevant
Body: <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>
  
Tags: <templating><layout>
Title: Determine a layout based on column number
ThreadText: # 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 %}<div class="row">{% endif %}
      {# content #}
    {% if x + y = 100 %}</div>{% 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 %}
  <div class="row">
    {% 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 %}
        </div><div class="row">
        {% thisRowLength = 0 %}
      {% endif %}
  
      {# now we know it fits, output this block #}
      {{ block.content }}
      {% set thisRowLength = thisRowLength + thisBlockLength %}
    {% endfor %}
  </div>
  
  ```
  
  You will end up with an empty `<div class="row"></div>` 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.
  
  
  ---
  
  