14.8.2023

display: contents;

Die CSS property display: contents sorgt dafür, dass das Element nicht mehr selbst eine Box generiert, sondern ersetzt wird durch eine Pseudo-Box und die seiner children.

Beispiel Use-Case:

Eine Angular Komponente soll eine beliebige Anzahl von Reihen in einem Grid darstellen.

<div class="grid">
  <div *ngFor="let row of rows"
       class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>
grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

row {
    display: contents;
}

Quellen:

<display-box>

Jonathan

Dualer Student

Zur Übersicht

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund