Set width of grid column with dynamic number of columns

Question

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