将一系列div转换为4x4网格

Question

我有一系列div，用*ngFor创建，我想让它们作为4x4 div的网格可见。以下是模板（HTML）和 CSS ：

  

模板（HTML）片段：

<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>

  

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显示在一行中，如何修改div以将div显示为4x4网格？有16个div。

Answer 1

您需要在容器上声明display: grid，在这种情况下.grid-container。

您可以使用grid-template-columns: repeat(4, 106.25px);

这将创建4列，每列宽度为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>