CSS Grid布局未来的特性
早在2012年，我写了一篇有关于CSS Grid的新规范，当时只得到IE的支持。我当时没有意识到CSS Grid布局会成为一个主题。从此之后，我为此付出了四年的时间来研究、测试Grid布局，并且写相关的文章和到处宣讲。
当我在2016年12月再次写这篇文章时，我非常期待CSS Grid布局能得到Chrome和Firefox支持。明年初希望在这些浏览器中能得到扩展和改进2012年我探索过的Grid特性。在过去四年中在CSS规范组工作的过程，从浏览器的工程师到规范书写和Web开发人员。讨论了很多用例和功能补充。
CSS Grid布局规范现在处于候选人推荐状态。这种状态也意味着规范已完成。现在在讨论的是一些实现细节，而不是新功能。规范一些细节是有必要的，以便于浏览器能更好的实现。这对于我们开发人员也是有好处，也使开会更容易。然而这并不意味着停止了工作，而新的用例和特性不能提出Grid布局的未来功能。因此，在这篇文章中我将看看我认为网格布局未来还能做些什么。我喜欢这样去思考，不只是考虑CSS Grid，还可以考虑任何CSS规范。考虑如何更好的适应你的用例。
Subgrid: Level 1丢去的特性
CSS Grid布局在Chrome，Firefox和Webkit内核浏览器中都得到很好的实现，很多功能都得到了支持。然而有一个非常出色的功能，到目前为止在任何浏览器都还没有实现，那就是子网格（ subgrid）。一旦给元素设置了display的值为grid，那么该元素的所有子元素就变成了网格项目。这类似于Flexbox的表现方式，设置display:flex，它的所有子元素就成为了Flex项目。但这些行为并不适合于项目的子元素。你可以嵌套网格正如你可以在Flex容器中嵌套另一个Flex容器，但子网格和其父元素没有任何的关系。
subgrid行为将定义grid的父元素直接用于其子元素上。我觉得这将是最有手的，特别是用于多列的弹性网格上，比如典型的12列网格。在容器上可以定义一个网格，然后在这个网格上放置UI元素。
subgrid的规范包含了一个初始描述，给grid-template-columns和grid-template-rows设置一个subgrid值，这个你在2015年8月份的工作草案中可以了解到。这个版本的规范就意味着你只能申报一次subgrid，并创建一个不同的轨道。
为了能实现subgrid，今年早些时候对规范做出修订。也就是给display提供一个单独的属性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.”
如果在Level1中失去subgrid特性，因为它看起来我们可能实现次网格效果，当然这也给我们一个机会做进一步的讨论和迭代。我目前的想法是，在早期版本中没有考虑到次网格的两个维度。
有关于subgrid的扩展阅读
- My post from 2015 detailing why I feel subgrid is important
- My post based on the revised specification
- Eric Meyer’s thoughts on subgrid
- Write-up of a discussion from Igalia
给网格单元格、轨道和区域添加样式
grid可以定义一个CSS Grid布局，可以将其子元素放到网格上，但是你不能直接对网格的轨道或单元设置样式。网格甚至没办法做到多列的布局，类似column-rule属性。
为了给一个网格单元格设置背景颜色，到目前为止需要添加一个空的HTML元素或插入一个伪元素，比如下面的示例。使用1px的间距来模拟网格线，使用空的div元素和给伪元素添加颜色。
除了网格布局能够直接给一个单元格添加背景和边框，我觉得这将是一个不错的方法。在CSS WG草案中提供了通过网格单元格伪元素来美化网格布局中的单元格、轨道和区域。
更好的自动控制位置
如果你没有明确的对网格项目指定位置，那么他们会根据自动放置规则来放置网格项目。你可以在这个例子中看到我们已经创建了一个网格和网格项目把自己放到网格单元格中。
自动排列（auto-placement）算法是非常酷的。我们可以让一些网格项目自动排列（auto-place）；我们也可以让一些网格项目合并单元格；也可以使用grid-auto-flow的dense让网格项目紧密排列。
但是我认为，这可能是更强的特性。这个问题我已经在Github上发布到我的CSS Grid AMA上，提出的问题是，是否有可能将网格项目放在一个可用的特定名称下。这将允许在网格中使用自动排列（auto-placement）网格项目时允许跳过网格轨道道。这一问题，Emil Björklund在他的www-style列表也被提出来了，而且也把这篇文章移到了Github。我认为你可能也有类似的问题，如果真有的话，建议你在评论中添加进来。
创建非矩形的网格区域
网格区域是网格单元格的集合，通过设置列和行的网格线的开始位置以及结束位置创建网格区域，也可以使用grid-template-areas属性创建网格区域。然而这些网格区域是个矩形，你无法创建一个L型或其他非正式形状的网格区域。
也许在未来我们可以定义一个 L型或其他非矩形的网格区域。目前引入无效的代码(quote)创建一个L型的内容区域。
.wrapper {
display: grid;
grid-template-areas:
"sidebar header header"
"sidebar content quote"
"sidebar content content";
}
通过网格单元格或区域来放置流动的内容
我见过一些用例使用网格布局不是最好的解决方案，但是将会涉及到网格以及其他的CSS规范。有关于相关细节，我在这篇文章中有提到，对于这类问题，我相信可以通过CSS Regions规范或修订后版本可以解决。
如果能够在创建的网格布局中，通过网格区域控制流式文本排版那可能是非常有用的。Jen Simmons在Lisbon会议上向CSS工作组提了相关的建议，以及可能运行的方式。
今年早些时候在一篇文章中看到一些想法，包括网格（Grid）、区域（Regions）和Exclusions。这些是我自己的工作笔记，我想我自己的这些探索可能促使你有更好的想法。
解决keyboard/layout连接
Grid和Flexbox可以非常容易的把标记底部的内容提到布局的顶部（只是从视觉上做出改变）。这就提出了问题，用户在使用键盘指定内容时，你会发现自己跳转到意想不到的地方。Léonie Watson在有关于Flexbox布局以及键盘事件做出了相应的解释。
Grid布局规范目前反对创建这样操作，但我还是认为Web开发人员需要小心这样的操作。可能看起来没那么简单。在某些情况之下，你想要的逻辑顺序是遵循文档源和视觉上遵循更有意义。大家都在开始思考这个问题，你可以阅读这个邮件列表的相关讨论。
把你想要的网格布局特性的想法列出来
当没有令人兴奋的新的CSS特性时，我整天的工作就是在整一个软件件产品——一个CMS网站Perch。在这上面有许多我们从未敢想的用例，尽管可能需要很多好主意以及思考大量的用例。额外的用例由我们的客户和潜在客户为我们提供。从而让产品能得到更好的发展。那么对于网格布局也将会如此。
Grid作为一个“产品”已通过许多人深思。不管我们的用例有没有想到。没关系，只有你有一个，不管是不是适合于CSS规范，我们都可以用来思考，虽然Grid Level1的CSS规范完成了，但我们可以在Level 2中加入。在Level2中告诉大家，这些用例可以使用。
这也是你要为网格布局未来要作出的贡献。当你面对不能做的事时，不要只是抱怨关于CSS工作组不听普通开发者意见和相关的代码问题。相反，你只需要花几分钟时间写个用例，发布到你的博客中，或者到Codepen中创建相关的用例，然后提交到Github的CSS工作组中。就算是浏览器暂时无法实现你想要的效果，你也可以写一些伪代码，画一幅画，只是确保有足够的细节描述你的用例，让更多的人可以看到你想要网格解决什么问题。当然你的用例不能解决你想要的建议时，你可以使用任何软件来帮助你一起完成。一旦我们有了一个用例，就可以收集其他用例用来解决这类问题的方法和建议。
我写这篇文章主要是想解释我四年前写的关于网格布局的一些想法，以及我们现在在大多数浏览器中一点一点实现网格布局的一些特性。规范在不断的发展，浏览器的实现也需要一定的时间。这实际上是一件好事，因为它它一旦实现或在生产中使用就不可能收回。我们对CSS思考得花不少时间。所以你不要觉得因为你看到你的用例添加到规范中而立即被忽视。你其实也是在帮你自己的一个忙，你现在的想法和挫折或许再将来就能得到实现。
本文根据@Rachel Andrew的《What next for CSS Grid Layout?》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:https://24ways.org/2016/what-next-for-css-grid-layout。
大漠
如需转载，烦请注明出处：https://www.fedev.cn/css/what-next-for-css-grid-layout.htmlNike Resurrect the Air Vortex From 1985