How to create a horizontal grid using ng-repeat and fixed number of rows
<p>I have a simple array of text objects that I want to display in a grid. This is using the Ionic framework.</p>

<p>The grid must be:</p>

<ol>
<li>Fixed height</li>
<li>Exactly 3 rows</li>
<li>Horizontal scroll (infinite columns)</li>
<li>2 visible columns with screen width &lt; 768px (phones), 4 visible columns 768px and above (tablets)</li>
</ol>

<p>I have the media query for the column widths and am using  for the horizontal scrolling functionality.</p>

<p>How can I use ng-repeat (maybe with ngif ??) to create the grid, starting in the first column and filling that column with 3 rows before moving to the next column etc etc)</p>

<p>JS</p>

<pre><code>var items = [
{text: "This is item1"},
{text: "This is item2"},
{text: "This is item3"},
.
.
.
]
</code></pre>

<p>CSS:</p>

<pre><code>.myGridRow {
  height: 40%;
 }
 .myGridCol {
   width: 50%;
 }
 @media only screen and (min-width : 768px) {
   .myGridCol {
     width: 25%;
   }
 }
</code></pre>

<p>HTML</p>

<pre><code>&lt;ion-scroll direction="x"&gt;
 &lt;div class="row myGridRow"&gt; &lt;!-- The single container for the whole grid --&gt;

  &lt;div ng-repeat="item in items"&gt; &lt;!-- only do this 3 times before starting a new row --&gt;
   &lt;div class="row"&gt;&lt;div class="col myGridCol"&gt;{{item.text}}&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;

&lt;/div&gt;
&lt;/ion-scroll&gt;
</code></pre>

<p><a href="https://plnkr.co/edit/H3rn69xC6QojQoRibCjE?p=info" rel="nofollow">Desired Output</a></p>

<p>I am stuck here trying to determine how to move to the next column after each 3 rows, or if this is even  the right way to do this.</p>