title: (MVC 3 Razor) - Easier way to loop through 3 column div
body: <p>At the moment I'm using the following code in my CSHTML:</p>
  
  <pre><code>@{int i = 0;}
  @foreach (var item in Model.Traders)
  {
      if ((i++ % 3) == 0) {
          if (i != 1) {
              @:&lt;/div&gt;
          }
          @:&lt;div class="row"&gt;
      }
  
      @:&lt;div class="four column"&gt;&lt;div class="panel new"&gt;&lt;h3 class="dotted"&gt;&lt;strong&gt;@item.Title&lt;/strong&gt;&lt;/h3&gt;&lt;p&gt;@item.Description&lt;/p&gt;&lt;code&gt;&amp;lt;div class=&amp;quot;panel pick&amp;quot;&amp;gt;&lt;/code&gt;&lt;/div&gt;&lt;/div&gt;
  }
  
  @if (i != 0) {
      @:&lt;/div&gt;
  }
  </code></pre>
  
  <p>This outputs the following HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="four column"&gt;&lt;div class="panel new"&gt;&lt;h3 class="dotted"&gt;&lt;strong&gt;Title&lt;/strong&gt;&lt;/h3&gt;&lt;p&gt;Description&lt;/p&gt;&lt;code&gt;code&lt;/code&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class="four column"&gt;&lt;div class="panel new"&gt;&lt;h3 class="dotted"&gt;&lt;strong&gt;Title&lt;/strong&gt;&lt;/h3&gt;&lt;p&gt;Description&lt;/p&gt;&lt;code&gt;code&lt;/code&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class="four column"&gt;&lt;div class="panel new"&gt;&lt;h3 class="dotted"&gt;&lt;strong&gt;Title&lt;/strong&gt;&lt;/h3&gt;&lt;p&gt;Description&lt;/p&gt;&lt;code&gt;code&lt;/code&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="four column"&gt;&lt;div class="panel new"&gt;&lt;h3 class="dotted"&gt;&lt;strong&gt;Bobby&lt;/strong&gt;&lt;/h3&gt;&lt;p&gt;Bobby bobby bobby&lt;/p&gt;&lt;code&gt;&amp;lt;div class=&amp;quot;panel pick&amp;quot;&amp;gt;&lt;/code&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;!-- Add missing divs if there's less than 3 (there always needs to be 3 divs inside a div row). In this case it's 2 that are missing --&gt;
      &lt;div class="four column"&gt;&lt;/div&gt; &lt;!-- my code does not render these --&gt;
      &lt;div class="four column"&gt;&lt;/div&gt; &lt;!-- my code does not render these --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My question is whether there's an easier way to achieve what I'm doing within my view and to ensure that it adds the missing divs if there's less than 3 in a row.</p>