<p>When looping through Matrix rows, you can use <a href="http://twig.sensiolabs.org/doc/tags/for.html#the-loop-variable" rel="nofollow">{{ loop.index }} or {{ loop.index0 }}</a> to see which row you're at.</p>

<p>With loop.index, you could create html for each row number, or (for instance) create different html for even/uneven:</p>

<pre><code>{% for row in entry.matrixFieldHandle %}
    {% if loop.index is divisible by(2) %}
        &lt;p class="even"&gt;{{ row.text }}&lt;/p&gt;
    {% else %}
        &lt;p class="uneven"&gt;{{ row.text }}&lt;/p&gt;
    {% endif %}
{% endfor %}
</code></pre>

CC BY-SA 3.0
2015-08-03T17:08:43.593Z
Twig has tests for [even](http://twig.sensiolabs.org/doc/tests/even.html) and odd, so `{% if loop.index is even %}` will work too.
Marion Newlevant
CC BY-SA 3.0
2015-08-03T09:17:24.667Z
2015-08-03T09:17:24.667Z
Paul
<p>I have a complex html/css structure per 'row' that I would like to use Matrix to populate. Design markup as follows:</p>

<pre><code>&lt;!--- feature left --&gt;
&lt;section class="features-inner dark-bg-container"&gt;
    &lt;div class="row collapse small-uncollapse" &gt;
        &lt;div class="medium-5 small-12 columns end dark-bg" &gt;
            &lt;h3&gt;Title&lt;/h3&gt;
            &lt;p&gt;Lorem Ipsum...&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="medium-5 medium-push-2 small-12 columns end dark-bg-icon" &gt;
            &lt;img src="img/image.svg" class="feature-image"/&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;
&lt;!--- end of feature left --&gt;

&lt;!--- feature right --&gt;
&lt;section class="features-inner gold-bg-container"&gt;
    &lt;div class="row collapse small-uncollapse" &gt;
        &lt;div class="medium-5 medium-push-7 small-12 columns gold-bg" &gt;
            &lt;h3&gt;Title&lt;/h3&gt;
            &lt;p&gt;Lorem Ipsum...&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="medium-5 medium-pull-5 small-12 columns end gold-bg-icon"&gt;
            &lt;img src="img/image.svg" class="feature-image"/&gt;
        &lt;/div&gt;  
    &lt;/div&gt;
&lt;/section&gt;
&lt;!--- end of feature right --&gt;
</code></pre>

<p>How would I get Matrix to change the markup per 'row'? I looked at switch but that seems to be for types of block content/types.</p>

<p>TIA.</p>

<matrix>
Change HTML and CSS per Matrix row
# Change HTML and CSS per Matrix row

(Asked by: username_0 on 2015-08-03)

I have a complex html/css structure per 'row' that I would like to use Matrix to populate. Design markup as follows:


    
        
            Title
            Lorem Ipsum...
        
        
            
        
    





    
        
            Title
            Lorem Ipsum...
        
        
            
          
    



How would I get Matrix to change the markup per 'row'? I looked at switch but that seems to be for types of block content/types.
TIA.

**Tags:** matrix

---

## 1 answers

### Answer by username_1 on 2015-08-03. Score: 3 | Accepted answer

When looping through Matrix rows, you can use {{ loop.index }} or {{ loop.index0 }} to see which row you're at.
With loop.index, you could create html for each row number, or (for instance) create different html for even/uneven:
{% for row in entry.matrixFieldHandle %}
    {% if loop.index is divisible by(2) %}
        {{ row.text }}
    {% else %}
        {{ row.text }}
    {% endif %}
{% endfor %}

> **Comments:**
> **username_2**: Twig has tests for [even](http://twig.sensiolabs.org/doc/tests/even.html) and odd, so `{% if loop.index is even %}` will work too.  

---

