title: Trying to resolve CSS :nth-child formula with elements with a gallery
body: <p>I'm trying to get a gallery with a repeated pattern. The gallery consists of 2 columns and undefined rows, and I want one picture to have 60% width and the other one 40%.</p>
  
  <p>But on the second row should invert that order and never be like the row before.</p>
  
  <p>So would end a repeated pattern like this:</p>
  
  <p><a href="https://i.stack.imgur.com/60P1d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/60P1d.png" alt="enter image description here"></a></p>
  
  <p>The problem starts when I have a lot of pictures and I can't get to write that pattern with help of <code>nth-child</code>.</p>
  
  <p>This is what I got closets to:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>p:nth-child(2n-1) {
      background: green;
      color: white;
  }
  
  p:nth-child(2n-2) {
      background: red;
      color: white;
  }
  
  p:nth-child(3n+0) {
      background: red;
      color: white;
  }
  
  p:nth-child(3n+1) {
      background: green;
      color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;The first paragraph.&lt;/p&gt;
  &lt;p&gt;The second paragraph.&lt;/p&gt;
  &lt;p&gt;The third paragraph.&lt;/p&gt;
  &lt;p&gt;The fourth paragraph.&lt;/p&gt;
  &lt;p&gt;The fifth paragraph.&lt;/p&gt;
  &lt;p&gt;The sixth paragraph.&lt;/p&gt;
  &lt;p&gt;The seventh paragraph.&lt;/p&gt;
  &lt;p&gt;The eight paragraph.&lt;/p&gt;
  &lt;p&gt;The ninth paragraph.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I get the formula? Which one would be the solution?</p>