Kann CSS Grid Enkelkinder direkt positionieren und wie?

CSS-Raster: Können Sie „Enkelkinder“ im Raster positionieren?

Viele CSS-Rasterleitfäden implizieren eine Struktur, in der sich im Raster positionierte Elemente befinden direkte Kinder des Gitterelements. Es kann jedoch vorkommen, dass Sie ein „Enkel“-Element direkt auf dem Raster selbst positionieren müssen.

Die Notwendigkeit eines „Untergitters“

In einem Verschachtelungsszenario mit Wenn Sie ein Großeltern-Raster, einen Eltern-Container und Enkel-Elemente verwenden, möchten Sie möglicherweise jedes Enkel-Kind in seiner Zeile innerhalb des Rasters platzieren. Wäre dies in der Grid-Terminologie überhaupt sinnvoll?

Geben Sie ein: display: subgrid

Aus der CSS Grid Level 2-Entwurfsspezifikation führen wir das Konzept von display: subgrid ein. Auf ein Rasterelement angewendet, ermöglicht display: subgrid den untergeordneten Elementen des Elements, das Layout des Containerrasters zu erben und dabei die Rastereigenschaften des Elements zu ignorieren.

Diese Funktion ist in Browsern noch nicht weit verbreitet. Es bietet jedoch eine mögliche Lösung für das „Enkel“-Positionierungsproblem.

Alternativen für jetzt

Während wir auf die Unterstützung für display: subgrid warten, gibt es alternative Ansätze:

• Anzeige verwenden: Raster für Rasterelemente (es bestehen jedoch Einschränkungen).
• Anzeige verwenden: Inhalte, um die Gitterlinien vertikal zu erben.

Zusätzliche Ressourcen

• [Was ist CSS display: subgrid?](https://developer. mozilla.org/en-US/docs/Glossary/display)
• [Subgrids in CSS Grid Level 2](https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/)
• [Anzeige: Unterraster zum Ausrichten von Elementen auf Enkelcontainern](https: //bugzilla.mozilla.org/show_bug.cgi?id=1240834)

Das obige ist der detaillierte Inhalt vonKann CSS Grid Enkelkinder direkt positionieren und wie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!