title: Css grid and ngRepeat
body: <p>I have a grid layout that is not working correctly with ngFor (or any other loop)
  If I place class=&quot;container&quot; on the ngFor div it creates two containers, if I place it in an outer div it doesn't work. How can I create a grid layout for a repeatable list?</p>
  <pre><code>  &lt;div class=&quot;container&quot;&gt;
        &lt;div *ngFor=&quot;let house of array;let index=index;&quot;&gt;
          &lt;div class=&quot;item row2 col1&quot;&gt;
            1&lt;img src=&quot;assets/house-pic4.jpg&quot; class=&quot;grid-image&quot;&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;item row2 col2&quot; *ngIf=&quot;index %2 == 0&quot;&gt;
            2&lt;img src=&quot;assets/house-pic2.jpg&quot; class=&quot;grid-image&quot;&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;item row2 col1&quot; *ngIf=&quot;index %2 != 0&quot;&gt;
            3&lt;img src=&quot;assets/house-pic2.jpg&quot; class=&quot;grid-image&quot;&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;item row2 col2&quot;&gt;
            4 &lt;img src=&quot;assets/house-pic3.jpg&quot; class=&quot;grid-image&quot;&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>css:</p>
  <pre><code>    .container {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 1fr 1fr 1fr;
      grid-auto-rows: 12vh;
      grid-auto-flow: dense;
      }
  
      .item {
      display: block;
      overflow: hidden;
      writing-mode: horizontal-tb;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 0px;
      }
  
      .row2 {
      grid-row-end: span 2;
      }
  
      .row3 {
      grid-row-end: span 3;
      }
  
      .row4 {
      grid-row-end: span 4;
      }
  
      .row5 {
      grid-row-end: span 5;
      }
  
      .row6 {
      grid-row-end: span 6;
      }
  
      .col2 {
      grid-column-end: span 2;
      }
  
      .col3 {
      grid-column-end: span 3;
      }
  </code></pre>