如何在 CSS 網格容器中定位孫子？

網格容器的孫子

CSS 網格指南建議位於網格中的元素是網格元素的直接子元素。但是，如果您想要定位網格的“孫子”元素怎麼辦？

display: subgrid

CSS Grid Level 2 草案規範引入了子網格的概念。透過 display: subgrid，網格項目可以將其行和列的定義延後到其父網格容器。這允許兩個網格的內容對齊。

但是，此功能尚未在主要瀏覽器中實現。

其他選項

在網格層級 1 中，只有容器的流入子層級才會成為網格項。在網格項目上使用 display: subgrid 時，該項目的子項會尊重容器的線條。

或者，您可以在網格項目（嵌套網格容器）上使用 display: grid 或探索 display:contents 解決方法在“什麼是 CSS 的替代品”中描述子網格？ "

資源

• [子網格](https://blogs.igalia.com/mrego/2016/02/12/subgrids -大聲思考/)
• [Mozilla Bugzilla](https://bugzilla.mozilla.org/show_bug.cgi?id=1240834)

以上是如何在 CSS 網格容器中定位孫子？的詳細內容。更多資訊請關注PHP中文網其他相關文章！