title: Zebra striping a flexbox table with wrapping items
body: <p>I am looking for the simplest way to zebra stripe the rows on the following responsive flexbox table.</p>
  
  <p>In other words, rows 2 and 4 in this example, but unlimited, I can't know how many rows there will be because this is for a reusable component in a CMS system.</p>
  
  <p>The HTML cannot change but the number of rows and columns will change often. I am happy with setting a limit on columns but not rows.</p>
  
  <p>Is there any way to do it in pure CSS?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.Rtable {
    display: flex;
    flex-wrap: wrap;
  }
  
  .Rtable-cell {
    box-sizing: border-box;
    flex: 33.33%;
    margin: -1px 0 0 -1px;
    padding: 5px 10px;
    border: solid 1px slategrey;
  }
  
  h3 { margin: 0; }
  
  @media all and (max-width: 500px) {
    .Rtable {
      display: block;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="Rtable"&gt;
  
    &lt;div style="order:1;" class="Rtable-cell"&gt;&lt;h3&gt;Eddard Stark&lt;/h3&gt;&lt;/div&gt;
    &lt;div style="order:2;" class="Rtable-cell"&gt;Has a sword named Ice&lt;/div&gt;
    &lt;div style="order:3;" class="Rtable-cell"&gt;No direwolf&lt;/div&gt;
    &lt;div style="order:4;" class="Rtable-cell"&gt;Male&lt;/div&gt;
    &lt;div style="order:5;" class="Rtable-cell"&gt;&lt;strong&gt;Lord of Winterfell&lt;/strong&gt;&lt;/div&gt;
  
    &lt;div style="order:1;" class="Rtable-cell"&gt;&lt;h3&gt;Jon Snow&lt;/h3&gt;&lt;/div&gt;
    &lt;div style="order:2;" class="Rtable-cell"&gt;Has a sword named Longclaw&lt;/div&gt;
    &lt;div style="order:3;" class="Rtable-cell"&gt;Direwolf: Ghost&lt;/div&gt;
    &lt;div style="order:4;" class="Rtable-cell"&gt;Male&lt;/div&gt;
    &lt;div style="order:5;" class="Rtable-cell"&gt;&lt;strong&gt;Knows nothing&lt;/strong&gt;&lt;/div&gt;
  
    &lt;div style="order:1;" class="Rtable-cell"&gt;&lt;h3&gt;Arya Stark&lt;/h3&gt;&lt;/div&gt;
    &lt;div style="order:2;" class="Rtable-cell"&gt;Has a sword named Needle&lt;/div&gt;
    &lt;div style="order:3;" class="Rtable-cell"&gt;Direwolf: Nymeria&lt;/div&gt;
    &lt;div style="order:4;" class="Rtable-cell"&gt;Female&lt;/div&gt;
    &lt;div style="order:5;" class="Rtable-cell"&gt;&lt;strong&gt;No one&lt;/strong&gt;&lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>