Angular Material Mat Grid List Outermost Border - css

Question

I have a mat grid list with user defined number of row and col. I need to display all the border for each mat-grid-title cell.
However how do I display the outermost black border for mat-grid-list properly?
It's right and bottom border didnt show properly
<mat-grid-list cols="2" rowHeight="200px" style="border: 4px solid black">
<mat-grid-tile style="border: 2px solid red">
<div class='internalMatGrid' >
<mat-grid-list cols="1" rowHeight="2:1">
<mat-grid-tile>1</mat-grid-tile>
</mat-grid-list>
</div>
</mat-grid-tile>
<mat-grid-tile style="border: 2px solid red">2</mat-grid-tile>
<mat-grid-tile style="border: 2px solid red">3</mat-grid-tile>
<mat-grid-tile style="border: 2px solid red">4</mat-grid-tile>
</mat-grid-list>
Here is my stackblitz
https://stackblitz.com/edit/angular-7gjjjn
Thank you

Answer 1

Just add box-sizing: border-box; CSS property in mat-grid-title element, will resolve your issue. Thanks
<mat-grid-list cols="2" rowHeight="200px" style="border: 4px solid black">
<mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">
<div class='internalMatGrid' >
<mat-grid-list cols="1" rowHeight="2:1">
<mat-grid-tile>1</mat-grid-tile>
</mat-grid-list>
</div>
</mat-grid-tile>
<mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">2</mat-grid-tile>
<mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">3</mat-grid-tile>
<mat-grid-tile style="border: 2px solid red; box-sizing: border-box;">4</mat-grid-tile>
</mat-grid-list>

Answer 2

Its a hack to fix that i don't know whether its true or not but i figured it out what you need,
I wrap grid-list inside some div and give that div a border with some padding hack.
HTML
<div class="wrap">
<mat-grid-list cols="2" rowHeight="200px">
<mat-grid-tile style="border: 2px solid red">
<div class='internalMatGrid' >
<mat-grid-list cols="1" rowHeight="2:1">
<mat-grid-tile>1</mat-grid-tile>
</mat-grid-list>
</div>
</mat-grid-tile>
<mat-grid-tile style="border: 2px solid red">2</mat-grid-tile>
<mat-grid-tile style="border: 2px solid red">3</mat-grid-tile>
<mat-grid-tile style="border: 2px solid red">4</mat-grid-tile>
</mat-grid-list>
</div>
CSS
.wrap {
border: 4px solid;
padding: 0px 4px 4px 0;
}