Florence Maurice

Eines haben Gridlayout und Flexbox gemeinsam: Wenn man die Grid/Flexbox-Darstellung aktiviert, so lassen sich dann nur die echten Kindelemente anordnen, aber keine weiteren Nachkommen. Das diktiert einem aber auch eine entsprechende Struktur und manchmal passt es nicht … Abhilfe bietet die Eigenschaft display: contents.

Bei der Recherche für einen Artikel zum Thema CSS3-Layouts für web & mobile developer, der im Heft 8 2017 erscheint, bin ich auf die Eigenschaft display: contents gestoßen. Sie ist ähnlich wie display: none, mit einem entscheidenden Unterschied. Mit display: none blendet man das Element mit allen Nachkommen aus. display: contents dient ebenfalls dazu, ein Element auszublenden – aber nur das Element selbst, nicht die Kindelemente. Und das ist gerade bei Flexbox/Gridlayout praktisch.

Angenommen, wir haben folgende HTML-Struktur:

<section>
  <header>Kopfbereich</header>
  <main>
    <article>Artikel</article>
    <aside>Aside</aside>
  </main>
  <footer>Fußbereich</footer>
</section>

Wenn wir jetzt section zum Gridcontainer machen:

section {
display: grid;
}

… dann können wir damit header,  main und footer anordnen – aber wir erreichen article und aside nicht, da sie sich ja innerhalb von main befinden. Wenn wir allerdings

main  {
display: contents;
}

nutzen, ist main ausgeblendet und Gridlayout-technisch verhält sich so, als hätten wir die folgende Struktur:

<section>
  <header>Kopfbereich</header>
  <article>Artikel</article>
  <aside>Aside</aside>
  <footer>Fußbereich</footer>
</section>

Und damit können wir header, article, aside und footer in unser Raster einbeziehen. Ähnliche Fälle lassen sich auch mit Flexbox konstruieren.

Die nützliche Eigenschaft wird in Chrome ab 58 (hinter einem Flag – danke an Maren Lange für den Hinweis!) und Firefox ab 53 unterstützt. Das Flag, das in Chrome aktiviert werden muss, sind die “Experimentellen Webplattform-Funktionen”.

Beispiel ausprobieren

Was ich gerade gemerkt habe: Der Selektor section > * wählt trotzdem nur header und footer aus – nicht article und aside, ist vielleicht auch ganz logisch.