Angular CSS Grid Object across multiple Columns

Question

I'm trying to do what I thought was a simple task but can't seem to figure it out so maybe it's not possible.

I have an object that I'm iterating through and that object has two attributes

export class OptionLine {
  lineCode: number;
  lineDescription: String;
}

I would like the LineCode to be Column 1 and LineDescription to be Column 2

My most recent attempt looks like:

<div class="config-options-box">
  <div *ngFor="let optionLine of optionLines">
     <div class="config-options-line-name">{{optionLine.lineCode}}</div>
     <div class="config-options-line-choices">{{optionLine.lineDescription}}</div>
  </div>
</div>

CSS:

.config-options-box { display: grid; grid-template-columns: 300px 600px; grid-gap: 10px; } .config-options-line-name { grid-column-start: 1; grid-row-end: span 1 } .config-options-line-choices { grid-column-start: 2; grid-row-end: span 1 }

But this ends up with item 1 having 2 lines in the first cell, item 2 having 2 lines in the second cell (row 1 column 2), etc.

Is this even possible?

Answer 1

Figured out I could display a sub grid inside each column of the main grid. So the main grid is 1 row x 2 columns and then each column has a grid inside that is n rows x 1 column. Probably not the most efficient solution but I should have less than 20 items so I imagine it will be fine.

<div class="config-options-box">
  <div class="config-options-names">
    <div *ngFor="let optionLine of optionLines">
      <div class="config-options-line-name">{{optionLine.lineCode}}</div>
    </div>
  </div>
  <div class="config-options-descriptions">
    <div *ngFor="let optionLine of optionLines">
      <div class="config-options-line-name">{{optionLine.lineDescription}}</div>
    </div>
  </div>
</div>


.config-options-box {
  display: grid;
  grid-template-columns: 300px 600px;
  grid-gap: 10px;
}

.config-options-subgrid {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 10px;
}