`display: subgrid` 如何在 CSS 網格中定位孫子？

子網格功能：在網格中定位孫子

在CSS 網格中，元素通常是網格容器的直接子級。但是，隨著「display: subgrid」屬性的引入，開發人員可以將網格的孫子元素定位在網格本身上。

什麼是 Display: Subgrid？

display: subgrid 屬性在網格項目中建立子網格容器。此子網格可以繼承其父網格的網格定義，允許其內的網格項與父網格的網格線對齊。

使用顯示：子網格

到將grandhild 元素放置在父網格上，將父元素設為「display: subgrid」並為其提供必要的網格屬性。然後，將孫子元素設定為子網格內的網格項目。

例如：

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

在此範例中，「parent-grid」元素設定為「display:子網格」並且有兩列。 「child-grid」元素是父網格內的子網格，它有兩行。 「孫元素」是子網格中的網格項。

因此，元素 A、B 和 C 將各自在父網格中佔據自己的行。

瀏覽器支援

顯示：子網格仍然是 CSS 網格規格中建議的功能，尚未在主要瀏覽器中廣泛支援。它可在 Firefox Nightly 和 Microsoft Edge（帶標誌）中使用。

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