I am encountering an issue with my HTML code. Initially, it looks like this:
<div style="
display: grid;
grid-template-columns: 200px 200px 200px;">
<button style="width:100%; height:100%" *ngFor="let value of squares; let i = index">
{{value}}
</button>
</div>
Here is what it looks like:
https://i.sstatic.net/4v41f.png
However, when I encapsulate the button within another element like this:
<div style="
display: grid;
grid-template-columns: 200px 200px 200px;">
<div style="height:200px"><button style="width:100%; height:100%" *ngFor="let value of squares; let i = index">
{{value}}
</button></div>
</div>
The grid breaks, and it appears that the CSS from the button disappears. See image here: https://i.sstatic.net/BLCxc.png
I am seeking assistance in understanding why this is happening. Any input would be greatly appreciated.