css网格_子网格已移至CSS网格规范的第2级

css网格

The Level 1 CSS Grid specification has now landed in Firefox and Chrome, and is expected to ship in the next version of Safari. Those implementations cover the majority of the level one spec and are very interoperable. There are a few differences, mostly due to parts of the specification that are still being worked on even as grid ships, however the browsers implement the majority of the spec in the same way.

1级CSS网格规范现已在Firefox和Chrome中发布，并有望在Safari的下一版本中发布。 这些实现涵盖了一级规范的大部分，并且具有很好的互操作性。 存在一些差异，这主要是由于规范的某些部分甚至在网格运输中仍在处理中，但是浏览器以相同的方式实现了大多数规范。

The standout missing element is of course subgrid. No browser has an implementation of subgrid as yet, and one implementor has serious concerns about the revised spec for this feature that was edited into the Level 1 specification last year.

突出的缺失元素当然是子网格。 到目前为止，还没有浏览器具有subgrid的实现，并且一个实现者对该功能的修订版规范感到严重关切 ，该规范已于去年被编辑为Level 1规范。

The revised specification was a simplified version of the feature detailed in previous drafts of the spec. The key difference was that in the revised version, a subgrid would be locked to two dimensions. Therefore you would need to know in advance how many rows AND columns that you needed in the subgrid, and account for them in the parent grid. I think a common use case would be wanting the nested items to use the column tracks, but maintain rows according to whatever content was flowed into that area. At the time, I was keen to explore a revised version as I believed (and still do) that subgrid is an important piece of being able to create robust layout on the web. I also feel it is important in that it can remove the temptation to flatten markup to enable items to be more easily grid items. However I had some doubts about this being locked to two dimensions then, and as time has gone by, and I have started to see more author use cases, that feeling has increased.

修订后的规范是该规范的先前草案中详细介绍的功能的简化版本。 关键区别在于，在修订版本中，子网格将被锁定为两个维度。 因此，您需要提前知道子网格中需要多少行和列，并在父网格中进行说明。 我认为常见的用例是希望嵌套项目使用列轨道，但根据流入该区域的内容来维护行。 当时，我热衷于探索一个修订版本，因为我相信（现在仍然如此），subgrid是能够在Web上创建可靠布局的重要组成部分。 我也觉得很重要，因为它可以消除扁平化标记的诱惑，使项目更容易成为网格项目。 但是， 我对将其锁定到两个维度有一些怀疑 ，随着时间的流逝，我开始看到更多的作者用例，这种感觉有所增加。

为什么要将功能移到2级？ (Why move the feature to level 2?)

In the CSS WG telecon yesterday, the group discussed and then voted on moving the subgrid feature to Level 2 of the specification. I voted for this move, despite being as keen as ever to see this implemented.

在昨天CSS WG电信会议中， 该小组进行了讨论，然后投票赞成将子网格功能移至规范的第2级。 尽管我一如既往地热衷于实现此目标，但我还是投票支持此举。

Whether subgrid stays in the Level 1 specification or is moved, is probably academic in terms of it being implemented. Moving it however enables the implementations to complete on all the features of Level 1, which would be a positive thing for web developers - to know that everything in the spec is available. It also hopefully signals that we would like more feedback, and ideas from browser implementors and authors. What is required from this feature? Does the revised proposal make sense, or would it leave out a whole host of use cases?

子网格是保持在1级规范中还是被移动，就其实现而言可能是学术性的。 但是，移动它可以使实现完成级别1的所有功能，这对于Web开发人员来说是一件好事-要知道规范中的所有内容都可用。 它还希望表明我们希望获得更多反馈，以及来自浏览器实施者和作者的想法。 此功能需要什么？ 修订后的提案是否有意义，还是会遗漏大量用例？

现在怎么办？ (What now?)

I do not want to see this feature shuffled out of view. I still believe it is incredibly important for grid. I would like to double down on efforts to collect real use cases for the feature from web developers, now that people are starting to build real things with grid as opposed to demos. I can then bring those to the discussions that browser implementors and the spec editors are having around the feature.

我不想看到此功能被淘汰。 我仍然认为这对网格非常重要。 我想加倍努力从Web开发人员那里收集功能的实际用例，因为人们开始使用网格而不是演示来构建真实的东西。 然后，我可以将这些带入浏览器实现者和规范编辑者围绕该功能进行的讨论。

如何提供用例 (How to provide a use case)

What makes for a good use case for the feature? It doesn’t need to be anything complicated.

是什么使该功能成为一个很好的用例？ 不需要太复杂。

If you are building things with grid and think, “it would be very handy if these child elements of a grid item could use the parent grid”. That is where you want subgrid.

如果您使用网格构建事物并思考， “如果网格项目的这些子元素可以使用父网格将非常方便” 。 那就是您想要子网格的地方。

You may be able to solve that issue with display: contents which is available in Firefox and in development in Chrome. Leaving browser support out of the equation (we’re talking about something that doesn’t exist anyway) would display: contents solve your problem?

您也许可以通过显示来解决该问题： Firefox中和Chrome开发中都可用的内容 。 如果不考虑浏览器支持（我们正在谈论的是根本不存在的东西），则会显示：内容可以解决您的问题？

If display: contents doesn’t solve the issue, or would only partially solve the issue, or solve it by introducing a new one this is probably a use case for subgrid. Would a subgrid locked to two dimensions work? Or do you need to ability to line things up in one dimension (column or row) and then have the content dictate the tracks in the other dimension?

如果display：contents不能解决问题，或者只能部分解决问题，或者通过引入新的解决方案，那么这可能是subgrid的用例。 锁定到二维的子网格是否可以工作？ 还是您需要能够将一个维度（列或行）对齐，然后让内容决定另一维度的轨道？

I would love to see any of these use cases. Post then with code if possible (or a drawing) over at my CSS Grid AMA, like this one. Collecting use cases means we can test the existing proposal, or any future ones, against real requirements.

我很乐意看到所有这些用例。 然后将可能的代码（或图形）发布到我CSS Grid AMA上， 就像这样 。 收集用例意味着我们可以根据实际需求测试现有提案或任何将来的提案。

翻译自: https://rachelandrew.co.uk/archives/2017/03/16/subgrid-moved-to-level-2-of-the-css-grid-specification/

css网格