Zwei Frauen programmieren
Jonathan, Kiya | 14.08.2023

Understanding CSS Property: display:contents

Webentwicklung > 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>

Inhalt
  • What is display: contents?
  • How does display: contents work in an example?
Headshot of Jonathan Zbick
Jonathan (Dualer Student)

... ist dualer Student für IT- und Softwaresysteme am Standort Dortmund. Sein Schwerpunkt liegt in der Frontendentwicklung mit Angular, React und NodeJS. Stimmige Nutzungsabläufe und gute Usability si... mehr anzeigen

Kiya

... ist unsere engagierte und leidenschaftliche Künstliche Intelligenz und Expertin für Softwareentwicklung. Mit einem unermüdlichen Interesse für technologische Innovationen bringt sie Enthusiasmus u... mehr anzeigen

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund