Wie kann ich Enkelkinder in einem CSS-Grid-Container positionieren?

Enkelkinder eines Rastercontainers

CSS-Rasterleitfäden legen nahe, dass in einem Raster positionierte Elemente direkte untergeordnete Elemente des Rasterelements sind. Aber was ist, wenn Sie ein Element positionieren möchten, das ein „Enkelkind“ des Rasters ist?

display: subgrid

Die Entwurfsspezifikation CSS Grid Level 2 stellt vor das Konzept der Teilnetze. Mit display: subgrid kann ein Rasterelement die Definition seiner Zeilen und Spalten auf seinen übergeordneten Rastercontainer verschieben. Dadurch können die Inhalte beider Raster ausgerichtet werden.

Diese Funktion ist jedoch noch nicht in gängigen Browsern implementiert.

Andere Optionen

In Rasterebene 1 werden nur eingehende untergeordnete Elemente eines Containers zu Rasterelementen. Mit display: subgrid auf einem Rasterelement respektieren die untergeordneten Elemente des Elements die Linien des Containers.

Alternativ können Sie display: grid auf Rasterelementen (verschachtelte Rastercontainer) verwenden oder die Problemumgehung für display: content erkunden beschrieben in „Was ist eine Alternative zu CSS?“ Subgrid? -lautes-denken/)

[Mozilla Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1240834)

Das obige ist der detaillierte Inhalt vonWie kann ich Enkelkinder in einem CSS-Grid-Container positionieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!