I have the following html code:

```html
<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>

```

Which looks like

[![enter image description here](https://i.stack.imgur.com/4v41f.png)](https://i.stack.imgur.com/4v41f.png)

However if I encapsulate with something else, for example

```html
<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, it's like the css from the button dissapears

[![enter image description here](https://i.stack.imgur.com/BLCxc.png)](https://i.stack.imgur.com/BLCxc.png)

Could anyone please indicate me what's going on?

<https://stackblitz.com/edit/angular-ivy-5wfurm?file=src/app/app.component.html>