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:
Standort Hannover
newcubator GmbH
Bödekerstraße 22
30161 Hannover
Standort Dortmund
newcubator GmbH
Westenhellweg 85-89
44137 Dortmund