title: Transform a sequence of divs into a 4x4 grid
body: <p>I have a sequence of divs, created with <code>*ngFor</code> and I want to make them visible as a 4x4 grid of divs. Here are the <em>HTML</em>  and <em>CSS</em> :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.game-containter {
    background: F4A460;
    grid-template-columns: repeat(106.25px, 1fr);
    grid-gap: 15px;
    grid-auto-rows: 470;
  }
      
  div {
    display: inline-block;
  }
      
  .grid-cell {
    width: 106.25px;
    height: 106.25px;
    margin-right: 15px;
    margin-bottom: 15px;
    float: left;
    border-radius: 3px;
    background: #acaaaa;
    text-align: right, bottom;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="game-container"&gt;
    &lt;div class="grid-container" *ngFor="let item of itemArray"&gt;
      &lt;div class="grid-cell-{{item|number}}"&gt;
        &lt;span&gt;{{item}}&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;button (click)="Right(itemArray)"&gt;Right&lt;/button&gt;
    &lt;button (click)="Left(itemArray)"&gt;Left&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Using these lines, the divs are shown in a line, how these should be modified for presenting the divs into a 4x4 grid? There are 16 divs.</p>