I am looking to generate a grid template from a nested array. The current method works well if the elements naturally have the same height, but issues arise when values are too long and some elements end up with different heights.
<div id="container" [style.grid-template-columns]="'repeat(outerArray.length, 1fr)'" [style.columnGap.rem]="1" *ngIf="outerArray.length != 0">
<div class="outerArray" *ngFor="let inner of outerArray">
<div *ngFor="let item of inner">
{{item}}
</div>
</div>
</div>
The resulting items should be placed like this:
inner1value1 inner2value1 inner3value1
inner1value2 inner2value2 inner3value2
inner1value3
The desired grid look would be like this: (array with 8 inner arrays) https://i.sstatic.net/zop9Z.png
I aim to maintain the same width for each element in a column (while allowing columns to have different widths) and keep the same height in a row.
The table approach worked reasonably well, but the issue was that values from one inner array populate rows rather than columns, which doesn't align with what I need.
<table *ngIf="outerArray.length != 0">
<tbody>
<tr *ngFor="let inner of outerArray">
<td *ngFor="let item of inner;">
{item}}
</td>
</tr>
</tbody>
</table>
The arrays have varying sizes (initially longer, then the rest have one fewer item).
A sample array may look like this:
let outerArray = [
[
"short",
"bit longer",
"example value"
],
[
"not so long, but longer string",
"short words",
"bitLonger twoWords"
],
[
"shorter array",
"different lengths of strings"
],
[
"another shorter array",
"string"
]
]
The number and length of arrays can vary; sometimes there is one array with 8 elements, while other times there are 8 arrays with 2 elements. Strings typically consist of one or two words, but occasionally words may have up to 15 characters, requiring multiple lines to fit within the screen width when there are only a few inner arrays.
My ideal solution is to create divs without nesting and position them correctly using CSS styling.