Transform a sequence of divs into a 4x4 grid

Issue

I have a sequence of divs, created with *ngFor and I want to make them visible as a 4x4 grid of divs. Here are the HTML and CSS :

.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;
}

<div class="game-container">
  <div class="grid-container" *ngFor="let item of itemArray">
    <div class="grid-cell-{{item|number}}">
      <span>{{item}}</span>
    </div>
  </div>
  <button (click)="Right(itemArray)">Right</button>
  <button (click)="Left(itemArray)">Left</button>
</div>

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.

Solution

You need to declare display: grid on the container, in this case .grid-container.

You can use grid-template-columns: repeat(4, 106.25px);

This will create 4 columns, each of width 106.25px.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 106.25px);
  grid-gap: 15px;
}

.grid-cell {
  height: 106.25px;
  border-radius: 3px;
  background: #acaaaa;
  text-align: right, bottom;
}

<div class="game-container">
  <div class="grid-container">
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
    <div class="grid-cell">
      <span></span>
    </div>
  </div>
</div>

Answered By - sol