文档 修订 非修订区别_修订的子网格规范

When you use CSS Grid Layout by setting the value of the display property to grid or inline-grid, only direct children of that element become grid items. If you declare a grid for your layout on a containing element, you can’t then position elements nested in markup on that grid.

通过将display属性的值设置为grid或inline-grid来使用CSS Grid Layout时，只有该元素的直接子级才成为网格项。 如果在包含元素上为布局声明网格，则无法将嵌套在标记中的元素放置在该网格上。

The Grid Layout specification contains details of the subgrid keyword. Having subgrid would mean that it would be possible to position elements nested further in markup on a main grid, however this has not been implemented by any browser as yet and is marked as ‘at risk’ in the Working Draft, which says:

网格布局规范包含subgrid关键字的详细信息。 拥有子网格将意味着可以将标记中嵌套的元素进一步放置在主网格上，但是尚未由任何浏览器实现，并且在工作草案中被标记为“有风险”：

‘“At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first.’

““有风险”是W3C流程的技术术语，不一定表示该功能有被删除或延迟的危险。 这意味着工作组认为该功能可能难以及时地互操作，并且对其进行标记可以使工作组在过渡到“提议的Rec”阶段时在必要时删除该功能，而不必发布新的候选Rec。功能优先。”

p. It may not imply that the feature will be dropped, but it appears to give a decent get out clause should no browser implement the feature! Several of us who have looked into the Grid specification in some depth, feel strongly that the feature should be implemented. For background reading here is an older post of mine, and this excellent post from Eric Meyer outlining the issues. I was therefore glad to see some thinking around the subject from Igalia who are implementing Grid in Blink and WebKit.

p。 可能并不意味着该功能将被删除，但如果没有浏览器实现该功能，它似乎给出了不错的get子句！ 我们中的一些深入研究Grid规范的人强烈感到应该实现该功能。 对于背景阅读，这里是我的一个较早的帖子 ，而Eric Meyer的这篇出色的帖子概述了这些问题。 因此，我很高兴看到Igalia的一些想法，他们正在Blink和WebKit中实现Grid。

In the past two weeks a revised proposal was posted to the CSS Working Group mailing list. The hope is that a revised, simplified proposal would mean that subgrid will be implemented and that the version of grid layout that ships in browsers will contain some level of functionality, enabling a master grid to be defined on a parent element and then direct children, and also nested elements be positioned against the lines of that grid.

在过去的两周中， 修订后的提案已发布到CSS工作组邮件列表中。 希望修订后的简化提案将意味着将实现子网格，并且浏览器附带的网格布局版本将包含一定级别的功能，从而可以在父元素上定义主网格，然后直接子级，并且嵌套元素的位置与该网格线相对。

The revised proposal is not the easiest thing to understand, I had to get clarification after reading it, and I’m sure someone will be along to correct me if I have misrepresented any part of it in this post. There is a lot in that email that is most of interest to browser implementors, so I thought I would highlight the issue with the most initial impact on how we build websites - in the hope of encouraging some feedback.

修改后的提案不是最容易理解的事情，阅读完该文章后我必须对其进行澄清，而且我敢肯定，如果我在这篇文章中虚假陈述了任何内容，都会有人来纠正我。 该电子邮件中有很多是浏览器实现者最感兴趣的，因此，我想着重强调对我们的网站建设方式产生最初步影响的问题-希望能引起一些反馈。

规范当前对subgrid说什么？ (What does the spec currently say about subgrid?)

The current Editor’s Draft dated 22 April 2016 describes subgrid in the same way as the Working Draft dated 17 September 2015:

2016年4月22日的当前编辑草案以与2015年9月17日的工作草案相同的方式描述了子网格：

“A grid item can itself be a grid container by giving it display: grid; in this case the layout of its contents will be independent of the layout of the grid it participates in.

通过显示以下内容，网格项目本身可以成为网格容器： 在这种情况下，其内容的布局将独立于其参与的网格的布局。

In some cases it might be necessary for the contents of multiple grid items to align to each other. A grid container that is itself a grid item can defer the definition of its rows or columns to its parent grid container by using the subgrid keyword in grid-template-rows and/or grid-template-columns, making it a subgrid in that dimension. In this case, the grid items of the subgrid participate in sizing the grid of the parent grid container, allowing the contents of both grids to align.”

在某些情况下，可能有必要使多个网格项目的内容彼此对齐。 本身是网格项目的网格容器可以通过使用grid-template-rows和/或grid-template-columns中的subgrid关键字将其行或列的定义推迟到其父网格容器，使其成为该维度的子网格。 在这种情况下，子网格的网格项将参与父网格容器的网格大小调整，从而使两个网格的内容对齐。”

What this describes is the fact that right now you can nest grids.

这说明的事实是，现在您可以嵌套网格。

In the below CodePen I have a grid declared on wrapper, inside are a set of div elements which are all direct children of that element and so are laid out on the grid using auto-placement. There are also elements nested inside the div with a class of i. These are not direct children and so are not positioned on the grid, but I can also add display: grid to i and set up some columns using grid-template-columns at which point the child elements will place themselves onto the grid declared on i.

在下面的CodePen中，我在包装器上声明了一个网格，内部有一组div元素，它们都是该元素的直接子元素，因此使用自动放置在网格上进行布局。 还有一些嵌套在div中的带有i类的元素。 这些不是直接的子代，因此也没有放置在网格上，但是我还可以在display上添加display：grid，并使用grid-template-columns设置一些列，此时子元素将自己放置在i上声明的网格上。

The nested grid in this example has no relationship to the grid on wrapper. I can’t line up the nested grid items with items that are controlled by the parent.

此示例中的嵌套网格与包装器上的网格没有关系。 我无法将嵌套的网格项与父项控制的项对齐。

If instead we used the unimplemented subgrid keyword for grid-template-columns this would mean that columns in the nested grid would be taken from the parent. In the case of our example we would end up with a three column grid on box i, with the same flexible proportions as used on the overall grid. As in this image.

相反，如果我们将未实现的subgrid关键字用于grid-template-columns，则这意味着嵌套网格中的列将取自父级。 在我们的示例中，我们将在框i上得到一个三列网格，并具有与整个网格相同的灵活比例。 就像这张图片一样。

In both our parent and our subgrid we are making use of the implicit grid. Grid lines can be explicit, these are the lines we create by specifying grid-template-columns and grid-template-rows or implicit, these are lines created when we position things outside of the grid. A common use case being when we want to specify columns but then just allow as many rows to be created as required by our listing of products or images or whatever it is we are laying out.

在父级和子网格中，我们都在使用隐式网格。 网格线可以是显式的，这些是我们通过指定grid-template-columns和grid-template-rows或隐式创建的线，它们是在将对象放置在网格之外时创建的线。 一个常见的用例是，当我们想要指定列，然后只允许根据我们的产品或图像列表或所要布置的内容创建尽可能多的行时。

修订后的提案怎么说？ (What does the revised proposal say?)

You can read the full proposal on the CSS WG list here. I’m going to point out a couple of things I feel are important for discussion by the wider community.

您可以在此处阅读CSS WG列表中的完整建议 。 我要指出一些我认为对更广泛的社区进行讨论很重要的事情。

子网格适用于两个维度（行和列） (A subgrid is for both dimensions (rows and columns))

The way we specify that a grid is a subgrid changes in this new proposal. Instead of setting display: grid and then declaring subgrid on the grid-template-columns and grid-template-rows properties, we set display: subgrid and then do not add grid-template-columns and grid-template-rows properties at all. If we did add these properties, once we have declared a subgrid they will have no effect.

在此新提案中，我们指定网格为子网格的方式有所变化。 代替设置display：grid，然后在grid-template-columns和grid-template-rows属性上声明subgrid，我们设置display：subgrid，然后根本不添加grid-template-columns和grid-template-rows属性。 如果确实添加了这些属性，则一旦声明了子网格，它们将不会生效。

What this means is that for a subgridded element’s children to line up to the parent grid, it will have to do so both for the rows and the columns. For our example above we would need to change the outer grid to allow for two row tracks to accommodate the subgrid.

这意味着，要使子栅格化元素的子级与父网格对齐，对于行和列，都必须这样做。 对于上面的示例，我们需要更改外部网格以允许两行轨道容纳子网格。

子网格没有隐式网格 (A subgrid has no implicit grid)

The other implication of subgrids having to apply in both dimensions is that a subgrid has no implicit grid, therefore we cannot have an area where we use subgrid to line up columns, and then add as may rows as needed for the content added. We have to know the number of available rows, and only add the correct amount of content to fill them.

必须在两个维度上应用的子网格的另一个含义是，子网格没有隐式网格，因此我们无法在其中使用子网格排列列然后再根据需要添加行的区域中添加内容。 我们必须知道可用行的数量，并且仅添加正确数量的内容来填充它们。

适应性强的组件 (Adaptable components)

In many cases (and my example above) you can get nested grids to line up fairly easily without using subgrid as long as you are aware of exactly what the parent grid looks like at that point. For example in my initial nested example, change the grid-template-rows value to 1fr 1fr 2fr and the proportions will match that of the outer grid.

在许多情况下（和上面的示例），只要知道父网格在那时的确切外观，就可以使嵌套网格相当容易地对齐，而无需使用子网格。 例如，在我最初的嵌套示例中，将grid-template-rows值更改为1fr 1fr 2fr，并且比例将与外部网格的比例匹配。

Likewise with a subgrid in both dimensions. If you know what content you have for the subgrid, you can create enough tracks in the outer grid to contain these items.

同样在两个维度上都有一个子网格。 如果知道子网格的内容，则可以在外部网格中创建足够的轨道以包含这些项目。

However one of the key use cases I see for subgrid is in enabling creation of components that can adapt to their container. In my example, if the three column two row nested component was nested inside box g spanning two column tracks I would want it to display as two columns and three rows.

但是，我在subgrid上看到的关键用例之一是允许创建可以适应其容器的组件。 在我的示例中，如果三列两行嵌套组件嵌套在跨越两列磁道的g框内，我希望它显示为两列三行。

Neither nested grids (I would need to re-specify my column tracks) nor subgrid (I can’t use an implicit grid so only have two rows) would enable this.

嵌套网格（我需要重新指定列轨迹）或子网格（我不能使用隐式网格，因此只有两行）都不会启用此功能。

单维次网格是否为“边缘案例”？ (Is single dimension subgrid an “edge case”?)

The requirement for single dimension subgrid has been described as relatively rare. Perhaps in practice it is. I would certainly rather have some level of subgrid support in Level 1 of the specification than nothing.

单维子网格的需求已被描述为相对罕见 。 也许实际上是这样。 我当然希望规范的第1级具有某种程度的子网格支持，而不是没有。

I think that subgrid is an important part of this specification. I think that without it the promise of being able to create try grid-based layouts falls short. Worse, I think without it we will see developers and frameworks essentially stripping semantic markup, because a flat structure then becomes easy to lay out on the overall grid where a nested structure is not.

我认为子网格是该规范的重要组成部分。 我认为，没有它，就无法创建基于网格的尝试版图。 更糟糕的是，我认为如果没有它，我们将看到开发人员和框架实质上剥离了语义标记，因为这样一来，扁平结构就很容易在没有嵌套结构的整个网格上进行布局。

The question then is, if this flattening of markup potential is something we want to avoid, does the revised specification go far enough to prevent it?

然后的问题是，如果我们想避免加价潜力的变平， 那么修订后的规范是否能够阻止它呢？