在列中正确显示网格中的JSON数据

我正在努力正确格式化我的HTML。

我想使用json数据在html中显示我的信息,但是当使用 display: grid ,我似乎无法使它以正确的方式输出。

在我的 stackblitz 我展示了我希望它看起来如何,以及它现在是如何。。。

我的问题代码

<div class="grid">
  <div>Car</div>
  <div>Bike</div>
  <mat-checkbox class="boxes" *ngFor="let x of data">{{x.service}}</mat-checkbox>
</div>

CSS

.grid {
  padding: 10px;
  background: lightgray;

  display: grid;
  grid-template-columns: auto auto;
}

JSON格式

data = [
      {
        "type": "car",
        "service": "speed"
      },
      {
        "type": "car",
        "service": "price"
      },
      {
        "type": "bike",
        "service": "speed"
      },
      {
        "type": "bike",
        "service": "price"
      }
    ]