网格布局是 CSS 中的一种强大的布局工具，Grid 子网格 subgrid 是网格布局的一个重要特性，在 Chrome 58 中，我们发现了一个关于子网格 subgrid 的 bug，可能会影响到前端开发者的使用体验。本文将介绍这个 bug 的详细情况，并给出解决方法。
什么是 CSS Grid 子网格 subgrid？
CSS Grid 子网格 subgrid 是网格布局的一个关键特性，可以让开发者非常方便的创建复杂的布局，而不需要重复子网格的定义。子网格 subgrid 是一种子网格的略微不同的形式，它可以继承父级网格容器的大小和位置。父级网格容器中的网格线与子级网格容器中的网格线对齐，这样就可以创建非常灵活和嵌套的布局。
Chrome 58 的 bug
在 Chrome 58 中，我们发现了一个关于子网格 subgrid 的 bug，具体表现如下：当父级网格容器使用 repeat() 函数定义行网格时，子网格无法正确地继承行大小。这个问题存在于子级网格容器的列网格中，但列网格的大小在行方向上是无法继承的。
-- -------------------- ---- ------- ------- - -------- ----- -------------- --------- ---- - --------- ----- - ------ - -------- ----- -------------- --------- ---- - -------- -
在上面的例子中，子网格是无法正确地继承父级行网格容器的高度，因此在实际的布局中将无法达到预期的效果。
解决方案
为了解决这个问题，我们可以添加一个中间网格容器，并在父级和子级之间使用相同的网格维度和大小。这样，子级网格就可以正确地继承父级网格容器的大小和位置，并正确地定位。
-- -------------------- ---- ------- ------- - -------- ----- -------------- --------- ---- - --------- ----- - ------------- - -------- ----- -------------- -------- - ------ - -------- ----- -
在上面的示例代码中，中间网格容器中的子级网格容器将正确地继承行高，并正确地放置。
总结
CSS Grid 子网格 subgrid 是一个非常有用的特性，但在 Chrome 58 中存在一个 bug，可能会影响前端开发者的使用体验。为了解决这个问题，我们可以添加一个中间网格容器，并在父级和子级之间使用相同的网格维度和大小。这样可以让子级网格正确地继承父级网格容器的大小和位置，并正确地定位。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f46777f6b2d6eab3d6ed8b