Is it possible to set width of columns in grid when we don't know the number and order of them?

I have a dynamically rendering data. For example:

  dataArray = [
{
  title: 'A',
  data: [1, 2, 3, 4],
},
{
  title: 'B',
  data: [1, 2, 3, 4],
},
{
  title: 'C',
  data: [1, 2, 3, 4],
},
{
  title: 'D',
  data: [1, 2, 3, 4],
},
  ];

I 'm displaying it as grid in this way:

<div class="grid">
  <div class="column" *ngFor="let d of dataArray">
    <div>{{ d.title }}</div>
    <div *ngFor="let data of d.data">
      <div>{{ data }}</div>
    </div>
  </div>
</div>

My css:

.grid {
  display: grid;
}

.column {
  grid-row: none;
}

Now I want to set width to some columns. For example I want to set width of column:

• title: A - width 100px
• title: D - width: 150px.

I want to set those widths by titles, I don't know in witch order those column will render and how many of them will be. And I want the other columns to fit the content. I tried with grid-template-columns but I missed. Can anyone help me? Thanks