unity 子网格_子网格解决的设计模式

I’ve been playing with this early implementation of the subgrid feature in Firefox, and it occured to me that subgrid could solve a less obvious use case.

我一直在使用Firefox的subgrid功能的早期实现，在我看来subgrid可以解决一个不太明显的用例。

In Grid Layout you can target the end line of the explicit grid with -1. The explicit grid being the grid you create with grid-template-rows and grid-template-columns. However if you are using an implicit grid, for example to create as many rows as you need to load in your content, you can’t target the end of that grid with -1. This means you can’t easily span something to the end of your grid.

在“网格布局”中，您可以使用-1显式网格的终点。 显式网格是您使用grid-template-rows和grid-template-columns创建的grid-template-rows grid-template-columns 。 但是，如果使用隐式网格（例如，创建需要加载内容的行数），则无法使用-1定位该网格的末尾。 这意味着您无法轻松地将某些内容扩展到网格的末端。

It turns out that subgrid will let you do this. In this CodePen I am creating a four column, three row grid. The ul element is placed in row two, spanning three columns. The aside is placed in row 1, spanning to row -1.

事实证明，子网格可以让您做到这一点。 在此CodePen中，我将创建一个四列三行的网格。 ul元素位于第二行，跨越三列。 旁边放在第1行，跨到第-1行。

I make the ul a subgrid, so the items can lay themselves out in the columns defined on the parent. As we only have a subgrid for columns the ul has an implicit grid for rows, so as many rows as we need are created. These all go into that one auto sized row of the parent, which stretches to accomodate them. Here is an image of what that looks like. The subgridded bit being the list items A to K. You can see these line up with the direct child elements in the header as they are using the same column tracks.

我将ul为子网格，以便将项放置在父级定义的列中。 由于我们只有列的子网格，因此ul的行具有隐式网格，因此可以创建所需数量的行。 这些全部放入父级的自动调整大小的一行中，该行会扩展以适应它们。 这是看起来的图像。 子网格位是列表项A到K。您可以看到它们与标题中的直接子元素对齐，因为它们使用相同的列轨道。

I’m very glad we held out for one-dimensional subgrids, as I think there are probably more non-obvious patterns we can use this feature for.

我很高兴我们为一维子网格提供支持，因为我认为可以使用此功能的可能还有更多非显而易见的模式。