title: How to offset items in a 4x4 grid using sass loop?
body: <p>I'm trying to create a 4 by 4 grid in css using this loop, but with little luck. The div named &quot;holder&quot; is 100% width and height. I want its children to all be 25% height and 25% width. How would you do that using this approach?</p>
  <p>html</p>
  <pre><code>  &lt;div class=&quot;holder&quot;&gt;
      &lt;figure data-partial=&quot;1&quot;&gt;1&lt;/figure&gt;
      &lt;figure data-partial=&quot;2&quot;&gt;2&lt;/figure&gt;
      &lt;figure data-partial=&quot;3&quot;&gt;3&lt;/figure&gt;
      &lt;figure data-partial=&quot;4&quot;&gt;4&lt;/figure&gt;
      &lt;figure data-partial=&quot;5&quot;&gt;5&lt;/figure&gt;
      &lt;figure data-partial=&quot;6&quot;&gt;6&lt;/figure&gt;
      &lt;figure data-partial=&quot;7&quot;&gt;7&lt;/figure&gt;
      &lt;figure data-partial=&quot;8&quot;&gt;8&lt;/figure&gt;
      &lt;figure data-partial=&quot;9&quot;&gt;9&lt;/figure&gt;
      &lt;figure data-partial=&quot;10&quot;&gt;10&lt;/figure&gt;
      &lt;figure data-partial=&quot;11&quot;&gt;11&lt;/figure&gt;
      &lt;figure data-partial=&quot;12&quot;&gt;12&lt;/figure&gt;
    &lt;/div&gt;
  </code></pre>
  <p>sass/scss</p>
  <pre><code>  figure {
      width: 25%;
      height: 25%;
      top: 0;
      position: absolute;
      border: 1px solid #000000;
    }
    @for $i from 1 through 12 {
      figure[data-partial=&quot;#{$i}&quot;] {
        width: ?;
        height: ?;
      }
    }
  </code></pre>