CSS grid different number of columns - css

Question

I want to make a grid with different column sizes ('ITEM = V' covers all width 'ITEM A' or 'P' or 'T' cover each 50 percent of the grid width), as shown in the image. Any help?
i ve been tryin to solve this for a week now. Really what's wrong with this. (video should take two columns)
<div class="grid-container">
<div *ngFor="let media of allMedia">
<div *ngIf="media.type==='V'" class="item1">
{{media.title}}
</div>
<div *ngIf="media.type==='A'" >
{{media.title}}
</div>
<div *ngIf="media.type==='P'" >**Bold Text Here**
{{media.title}}
</div>
<div *ngIf="media.type==='T'">
{{media.title}}
</div>
</div>
</div>
CSS
.grid-container {
display: grid;
background-color: #2196F3;
grid-template-columns: 50% 50%;
}
.item1 {
grid-area: 2 / 1 / span 2 / span 2 !important;
border-style:solid;
text-align:center
}

Answer 1

It'd be best to use display: grid; for something like this.
You'd have to add unique classes/id's for the children elements and then set the grid-area property on each of them.
The layout of grid-area is:
grid-area: row-start / column-start / row-end / column end;
You can also use shorthand if two properties have the same value:
grid-area: 2 / 1
/* Equates to: */
grid-area: 2 / 1 / 2 / 1
Example:
.outer-grid {
display: grid;
height: 100vh;
}
.newspaper1 {
grid-area: 1 / 3 / 2 / 1;
border-style: solid;
}
.newspaper2 {
grid-area: 2 / 1;
border-style: solid;
}
.newspaper3 {
grid-area: 2;
border-style: solid;
}
.newspaper4 {
grid-area: 3 / 1;
border-style: solid;
}
.newspaper5 {
grid-area: 3 / 2;
border-style: solid;
}
.newspaper6 {
grid-area: 4 / 3 / 4 / 1;
border-style: solid;
}
<div class="outer-grid">
<div *ngIf="item==='V'" class="newspaper1">
some content
</div>
<div *ngIf="item==='A'" class="newspaper2">
some content
</div>
<div *ngIf="item==='P'" class="newspaper3">
some content
</div>
<div *ngIf="item==='T'" class="newspaper4">
some content
</div>
<div *ngIf="item==='A'" class="newspaper5">
some content
</div>
<div *ngIf="item==='V'" class="newspaper6">
some content
</div>
</div>
Here's a good interface for learning CSS Grid if you want to learn more: https://alialaa.github.io/css-grid-cheat-sheet/