Wie positioniert „display: subgrid' Enkelkinder innerhalb eines CSS-Rasters?

Subgrid-Funktion: Enkelkinder innerhalb eines Rasters positionieren

In CSS Grid sind Elemente normalerweise direkte untergeordnete Elemente des Rastercontainers. Mit der Einführung der Eigenschaft „display: subgrid“ können Entwickler jedoch Elemente, die Enkelkinder des Rasters sind, im Raster selbst positionieren.

Was ist Display:Subgrid?

Die Eigenschaft display: subgrid erstellt einen Subgrid-Container innerhalb eines Rasterelements. Dieses Unterraster kann die Rasterdefinition seines übergeordneten Rasters erben, sodass darin enthaltene Rasterelemente an den Rasterlinien des übergeordneten Rasters ausgerichtet werden können.

Anzeige verwenden: Unterraster

Zu Positionieren Sie ein Grandhild-Element auf dem übergeordneten Raster, setzen Sie das übergeordnete Element auf „display: subgrid“ und geben Sie ihm die erforderlichen Rastereigenschaften. Legen Sie dann das Enkelelement als Rasterelement innerhalb des Unterrasters fest.

Zum Beispiel:

<div class="wrapper">
  <div class="parent-grid">

In diesem Beispiel ist das Element „parent-grid“ auf „display: subgrid“ und hat zwei Spalten. Das „child-grid“-Element ist ein Untergitter innerhalb des übergeordneten Gitters und verfügt über zwei Zeilen. Die „Enkelelemente“ sind Rasterelemente innerhalb des untergeordneten Rasters.

Daher belegen die Elemente A, B und C jeweils ihre eigene Zeile im übergeordneten Raster.

Browser-Unterstützung

Anzeige: Subgrid ist immer noch eine vorgeschlagene Funktion in der CSS-Grid-Spezifikation und wird in den wichtigsten Browsern noch nicht umfassend unterstützt. Es ist in Firefox Nightly und Microsoft Edge (mit einer Flagge) verfügbar.

Das obige ist der detaillierte Inhalt vonWie positioniert „display: subgrid' Enkelkinder innerhalb eines CSS-Rasters?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!