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

Question

我正在努力正确格式化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"
      }
    ]