How to combine a list of names and values with the values aligned vertically and display each combin-CodePudding

Say I have a list of fields and each field has a name and a value. I want to display each name and value side by side. Each field is a row and after 4 rows the next row should wrap to a new column. So this would be the expected result:

Field 0             Field Value 0     Field 3     Field Value 3
Field 1             Field Value 1     Field 4     Field Value 4 
Field 2             Field Value 2   
Field Long Name     Field Value 2

The closest I've been able to get is something like this:

.grid-container {
    display: inline-grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
}

.cell {
    display: grid;
    grid-template-columns: auto auto;
}

<div >
    <ng-container *ngFor="let field of Fields">
        <div >
            <span>field.name</span>
            <span>field.value</span>
        </div>
    </ng-container>
</div>

This gives me something like this:

Field 0     Field Value 0         Field 3     Field Value 3
Field 1     Field Value 1         Field 4     Field Value 4 
Field 2     Field Value 2   
Field Long Name     Field Value 2

I understand that this is because I'm essentially creating separate grids so the size is dependent on each name and value of the field. How would I go about getting that expected result?

CodePudding user response：

There's probably a cleaner way, but I was able to get this working by splitting the list of Fields into a 2D array with 4 values each then creating a separate table for each:

splitFields(fields: Field[], size) {
    for (var chunks = [], i = 0; i < fields.length; i  = size) {
      var slice = fields.slice(i, i   size);
      chunks.push(slice);
    }

    return chunks;
  }

HTML

<div >
  <ng-container *ngFor="let fields of splitFields(Fields, 4)">
    <table>
      <tr *ngFor="let field of fields">
        <td>{{ field.Name }}:</td>
        <td>{{ field.Value }}</td>
      </tr>
    </table>
  </ng-container>
</div>

CSS

.grid-container {
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 5px;
}

table {
  height: fit-content;
}

td {
  padding: 5px;
}

Result