I am attempting to integrate a CSS grid template that should function in the following manner:
Columns with equal width
1st and 3rd rows - 2 columns
2nd row - 3 columns
https://i.sstatic.net/aQyNR.png
Order = [{
details:[
{
key: '1',
label: 'Name',
checked: true
},
{
key: '2',
label: 'Age',
checked: false
},
{
key: '3',
label: 'Valid From'
},
{
key: '4',
label: 'Valid To'
},
{
key: '5',
label: 'Product'
},
{
key: '6',
label: 'State'
},
{
key: '7',
label: 'Country'
}}]
Using the above JSON, I have created the CSS grid
<div class="order-container">
<div class="grid-item">
<div class="grid-header vds-type-copy-strong" *ngFor="let col of salesOrder1[0].details">
<div>{{col.label}}</div>
</div>
</div>
</div>
CSS
.order-container {
.grid-item {
padding: 5px;
max-height: 402px;
overflow-y: auto;
display: grid;
grid-gap: 4px;
grid-template-columns: 1fr 1fr 1fr;
.grid-header {
text-align: center;
div{
padding: 8px 8px;
margin-bottom: 4px;
min-height: 37px;
}
}
}
}
How can I split the content after Age and then again after Product?