Understanding CSS Property: display:contents

The CSS property display: contents ensures that the element no longer generates a box itself, but is replaced by a pseudo-box, and those of its children.

Example Use-Case:

An Angular Component should represent an arbitrary number of rows in a grid.

1<div class="grid">
2  <div *ngFor="let row of rows"
3       class="row">
4    <div class="box"></div>
5    <div class="box"></div>
6    <div class="box"></div>
7  </div>
8</div>

1.grid {
2    display: grid;
3    grid-template-columns: repeat(3, minmax(200px, 1fr));
4}
5
6.row {
7    display: contents;
8}

Sources:

<display-box>