CSS display:contents

CSS GRID–Layout

display: contents lässt den Inhalt eines Blocks unangetastet. Der angesprochene Block selber mit all seinen Eigenschaften wird vollkommen außer Acht gelassen, so als wären sein öffnendes und schließendes HTML-Tag gar nicht vorhanden. Der Einsatz von display: contents wirkt, wenn Elemente tief in unnötigen Tags verschachtelt liegen. Das passiert vor allem in Content Management Systemen wie WordPress, Joomla oder Drupal.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

display: contents – Grid mit Zeilenraster

Nur die direkten Kind-Elemente eines Grid-Containers können im Raster des Grids platziert werden. So liegen zwar aufeinander folgende Elemente im Grid, aber innerhalb der einzelnen Grid-Elemente ist die Verteilung des Platzangebots »wie's grad passt«.

Geben wir den Grid-Elementen ein display: contents, verschwinden sie sozusagen – jedenfalls aus der Sicht das CSS. Die Grid-Elemente unter dem Grid-Container werden nicht mehr beachtet, stattdessen werden ihre Elemente zu Grid-Elementen. obwohl sie weiterhin als Gruppe logisch und semantisch im HTML-Markup stehen.

.gridblock {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr 1fr 1fr;
}

.gridgroup {
	border: 1px solid silver;
	background-color: ivory;
}
fraisier-420

1 Erdbeertörtchen mit Sahne

palmier-420

2 Palmier oder Schweineöhrchen, wie wir sie hier nennen

sable-420

3 Sablé oder oder geschichtetes Sandgebäck mit Himbeermarmelade-Klecks

display:contents An / Aus

Wenn gridgroup { display: contents } gesetzt wird, lösen sich die CSS-Eigenschaften der Grid-Elemente sozusagen in Luft auf – Hintergrundfarbe und border sind weg. Der Grid-Container hat weiterhin drei Spalten, aber die Spalten werden jetzt horizontal in der Reihenfolge besetzt, in der die Elemente im HTML stehen. Der Grid-Container braucht nun noch zwei zusätzlich Eigenschaften, um die Elemente in Spalten und Zeilen zu setzen:

.gridblock {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto;
	grid-auto-flow: column;
}

.gridgroup {
	display: contents;
}
C S S G R I D 12345123456 Header mit LogoOverlaySlideSidebarBlogBlogBlogBlogBlogBlogFooter