title: How to use css nth-child to target columns in a fixed grid size?
body: <p>In html/css, I have boxes wrapping in a parent box. We know for sure it will have 4 columns exactly.</p>
  <p>This is what I have so far</p>
  <p><a href="https://jsfiddle.net/f1cow40z/1/" rel="nofollow noreferrer">https://jsfiddle.net/f1cow40z/1/</a></p>
  <pre><code>&lt;div class=&quot;Parent&quot;&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
    &lt;div class=&quot;Tile&quot;&gt;A&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>css</p>
  <pre><code>.Parent {
    width:398px;
    font-size:0;
  }
  .Tile {
    display:inline-block;
    width:92px;
    height:92px;
    background-color:orange;
    color:white;
    font-size:12px;
  }
  .Tile:nth-child(2n), .Tile:nth-child(3n), .Tile:nth-child(4n) {
    margin-right:10px;
  }
  </code></pre>
  <p>The parent width is 398 because each tile is 92 in width and I want a gutter size of 10. So 92*4 + 10+10+10 = 398.</p>
  <p>However I want to add that gutter space (margin-right of 10px) only on the tiles on the first, 2nd and third columns, using something that works with IE11. So the nth-child css.</p>
  <p>How can I use that to only target the first 3 columns only?</p>
  <p>Thanks</p>