Problems with dynamically generated radio Buttons (Angular *ngfor)

I want to create several radio buttons with *ngfor.

<div class="gruendeAll">
<div class="gruende" *ngFor="let item of data">
  <label for="radiogrund{{item.grund}}">
    <input id="radiogrund{{item.grund}}" [value]='item.grund' value="grundValue" type="radio" name="grund" [(ngModel)]="form" class="select">
    {{item.grund}}
  </label>
</div>
</div>

And the buttons are supposed to be in a grid, therefore this is my .css

.gruende {
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 2px;
  align-items: center;
}

.gruende input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.gruende label {
  display: table-cell;    /* set Text in vertical center (with vertical align) */
  vertical-align: middle;
  text-align: center;     /* set Text in horizontal center */
  font-size: 100%;
  font-family: Tahoma;
  background-color: #424249;
  color: white;
  width: 205px;
  height: 80px;
  border-radius: 10px;
}

.gruende input[type="radio"]:checked + label {
  background-color: #969699;
}

Unfortunately the buttons are positioned among themselves and not in a grid (e.g. 3x3). I tried it with 10x <input type="radio"> and here it works. So the problem has something to do with *ngfor I guess. Also I cannot select a button, I click on the button but nothing happens (the button should change the color like its mentioned in the .css)

By the way, I am getting the data for the radio buttons out of a database (I have a Spring Boot connection). So I want to create dynamically more buttons.

Here is where I subscribe to the data:

 this.vorgangService.getGruende().subscribe(res => {
      this.data = res;

      this.grund = data.grund;

      this.size = this.data.length;
    });

I also have a formgroup in my .ts

form: FormGroup = this.formBuilder.group( {

  });