Wie weit reicht der Formatierungskontext von CSS Grid?

Einschränkungen des Rastercontainerbereichs

In CSS Grid ist der Formatierungskontext auf die Eltern-Kind-Beziehung innerhalb eines Rastercontainers beschränkt. Rastereigenschaften gelten nur für seine direkten untergeordneten Elemente.

Betrachten Sie das folgende Beispiel:

<ul>

Hier ist orgChartLevel1 der Rastercontainer und orgChartLevel1a, orgChartLevel2 und orgChartLevel2b sind untergeordnete Elemente in seinem Bereich.

Elemente, die Nachkommen des Grid-Containers sind, wie z orgChartLevel2b liegen außerhalb des Rasterformatierungskontexts. Auf diese Elemente angewendete Rastereigenschaften funktionieren nicht.

Lösung

Um Rastereigenschaften auf tief verschachtelte Elemente anzuwenden, müssen Sie entweder:

<ul>

Wenden Sie display:grid oder display:inline-grid auf ein übergeordnetes Element innerhalb des Grid-Containers an.

Entfernen Sie alle Wrapper-Elemente zwischen dem Grid-Container und die Elemente, auf die Sie Rastereigenschaften anwenden möchten.

Notizen

<ul>

Rasterelemente können auch Rastercontainer sein.

Weitere Informationen zum Verschachteln von Flex- und Grid-Containern finden Sie in den folgenden zusätzlichen Ressourcen.

Verwandt Lesen:

<ul>

Tief verschachtelte Elemente in einem Rastercontainer einer höheren Ebene positionieren

Korrekte Verwendung von Flex-Eigenschaften beim Verschachteln von Flex-Containern

Ist das eine schlechte Praxis? CSS-Grids verschachteln?

Das obige ist der detaillierte Inhalt vonWie weit reicht der Formatierungskontext von CSS Grid?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!