几周前，我在纽卡斯尔（Newcastle）的
Frontend NE上讲话，并在很大程度上解释了Grid Level 2中CSS CSS Grid Subgrid的功能。由于没有实现此属性（在浏览器中），我为此使用DevTools建模了许多演示表演。
在前往Smashing Conf的旧金山的途中，我主持了一个CSS Layout研讨会，并获得了Firefox Nightly试用版的访问权，该版本对该属性进行了早期实施。
这意味着我需要为5月的表演重做一些幻灯片，在那里将使用真实的屏幕截图。
我在Twitter上发布了一些屏幕截图，并且所有CSS Grid Subgrid属性与主Firefox Nigtly程序集中的标志一起使用后，我会将所有示例发布在
Grid by Example中 。 但是，对于每个比周末都要看Twitter还要重要的事情的人，这里有一些屏幕截图。 它们包含指向
My CodePen示例的链接，因此您可以查看Subgrid元素（subgrid）的代码。 我在Firefox DevTools中突出显示了Grid（网格）和Subgrid（子网格），以帮助您了解需要查看的内容。
列和行的网格
在这种情况下，子网格位于父元素的列和行中。 这意味着在子网格区域中没有隐藏的网格，因为这两种尺寸都与父级的可用轨迹相关。
CodePen-列和行的网格仅列网格
在这种情况下，我为列使用了一个子网格。 这意味着我可以使用隐式网格轨迹添加元素所需的尽可能多的线。 行使用它们自己的大小作为没有子网的嵌套网格。
CodePen-仅列网格仅子网
在这种情况下，我像往常一样以fr为单位使行成为子网格并定义了列。
如您所见，列路径与父路径不匹配，因为它们使用自己的网格定义。
CodePen-仅用于字符串的子网格我很高兴看到CSS Grid Subgrid的开发取得进展，并有机会在我的研讨会和报告中进行讨论。
可在以下链接中找到有关Subgrid的更多信息：