Wie kann ich CSS-Rastereigenschaften auf tief verschachtelte Elemente anwenden?

Rasterkontext und verschachtelte Elemente

In CSS Grid sind Rastereigenschaften auf Elemente innerhalb einer Eltern-Kind-Beziehung beschränkt. Dies schränkt die Anwendbarkeit von Rastereigenschaften auf Elemente ein, die einem Rastercontainer direkt untergeordnet sind.

Beispiel für ein verschachteltes Raster

Stellen Sie sich ein Szenario vor, in dem Sie versuchen, ein tief verschachteltes Raster zu positionieren li-Element unter Verwendung von Rastereigenschaften, die auf ein UL der obersten Ebene angewendet werden, das den Rastercontainer darstellt:

#orgChart ul.orgChartLevel1 {
  display: grid;
  grid-template-columns: 12px auto;
  grid-template-rows: 100px auto auto;
  grid-row-gap: 30px;
}

#orgChart li.orgChartLevel2b {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

In diesem Beispiel ist das Das li.orgChartLevel2b-Element ist ein Nachkomme von ul.orgChartLevel1, aber kein direktes untergeordnetes Element. Daher gelten die auf ul.orgChartLevel1 definierten Rastereigenschaften nicht für li.orgChartLevel2b.

Lösung: Eltern-Kind-Beziehung herstellen

Um Rastereigenschaften auf tief verschachtelte Elemente anzuwenden Für Elemente müssen Sie eine Eltern-Kind-Beziehung zwischen dem Element, das Sie formatieren möchten, und einem Rastercontainer herstellen. Dies kann entweder durch Folgendes erfolgen:

• Anwenden von display:grid oder display:inline-grid auf ein übergeordnetes Element zwischen dem Rastercontainer und dem gewünschten Element.
• Entfernen aller dazwischen liegenden Wrapper-Elemente die die Eltern-Kind-Beziehung blockieren.

Hinweis zu Grid-Containern innerhalb des Grids Elemente

Es ist wichtig zu beachten, dass Grid-Elemente selbst Grid-Container sein können. In solchen Fällen gelten die Rasterlayouteigenschaften im Rahmen des Rasterelements, das als Rastercontainer definiert ist.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Rastereigenschaften auf tief verschachtelte Elemente anwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!