`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中文网其他相关文章！