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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.