divのシーケンスを4x4グリッドに変換

Question

私は*ngForで作成されたdivのシーケンスを持っており、divの4x4グリッドとして表示したいと考えています。使用

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

：

テンプレート（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フラグメント。ここテンプレート（HTML）とCSSですこれらdivを4x4グリッドに表示するには、divを線で表示します。 16のdivがあります。

Answer 1

display: gridをコンテナに宣言する必要があります（この場合は）。

あなたはこれが4列、幅106.25pxのそれぞれが作成されますgrid-template-columns: repeat(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>