CSS网格布局工作草案中的内容

The Grid Layout specification has brought us a new method for laying out elements that is much more flexible and better suited for modern web design. Specifications evolve in this day and age of the web, as such, a few things have changed in the latest draft of the Grid Layout module.

网格布局规范为我们带来了一种布局元素的新方法，该方法更加灵活并且更适合现代Web设计。 规范在当今网络时代不断发展，因此，“网格布局”模块的最新草案中发生了一些变化。

In this article, I thought I’d look at all those changes briefly to help everyone get up to speed. If you are new to the whole grid layout concept or the details are a bit hazy, I would like to suggest that you go over my introductory grid layout article to refresh your memory.

在本文中，我想我将简要介绍一下所有这些更改，以帮助大家快速入门。 如果您是整个网格布局概念的新手，或者您的细节有点朦胧，建议您阅读我的网格布局入门文章以刷新您的记忆。

我们不确定如何处理边距和填充百分比 (We’re Not Sure How to Handle Percentages in Margins and Padding)

Before proceeding any further, I would like to tell you something unrelated — but important — that you should be aware of. The margin that you apply to adjacent grid items does not collapse. This happens because grid items are contained within the containing block of their own grid areas independent of other items.

在继续进行任何操作之前，我想告诉您一些与您无关的但很重要的事项。 应用于相邻网格项目的边距不会折叠。 发生这种情况的原因是，网格项目包含在其自身网格区域的包含块内，而与其他项目无关。

Now, let’s discuss how the spec is going to handle percentages in margins and padding. When margins or padding for different grid items are specified as percentages, they could be resolved against either the inline axis of the grid or individual grid item’s own axis:

现在，让我们讨论一下规范将如何处理边距和填充百分比。 当将不同网格项的边距或填充指定为百分比时，可以相对于网格的内联轴或单个网格项自己的轴来解析它们：

• With the inline axis — all the left/right/top/bottom percentages will be resolved against width of the grid.

  使用内联轴-所有左/右/上/下百分比将针对栅格宽度进行解析。

• With their own axis — left and right percentages will be resolved against width, while top and bottom percentages will be resolved against height.

  使用自己的轴-左和右百分比将针对宽度进行解析，而顶部和底部百分比将针对高度进行解析。

A little CSS and a diagram should help make things a bit clearer. Here is the CSS to create two grid elements with their padding set in terms of percentage:

一点CSS和一个图表应该可以使事情变得更加清晰。 这是CSS，用于创建两个网格元素，其填充设置为百分比：

.grid-container {
  display: grid;
  grid-template-columns: 150px 20px 350px;
  grid-template-rows: auto;
}

.grid-element {
  background-color: #444;
  color: #fff;
  font-size: 2em;
  padding: 10%;
}

.element-a {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}

.element-b {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}

According to the spec, the CSS above should create two grid items. .element-a has top/bottom padding equal to 13px (based on the computed height which was 130px) and left/right padding equal to 15px. Similarly, .element-b should have top/bottom padding equal to 13px and left/right padding equal to 35px.

根据规范，上面CSS应该创建两个网格项。 .element-a顶部/底部填充等于13px (基于计算的高度130px) ，左侧/右侧填充等于15px。 同样， .element-b顶部/底部填充应等于13px，而左侧/右侧填充应等于35px。

However, in Chrome and Opera, all paddings have a value of 15px for .element-a and 35px for .element-b. In Firefox 48, the padding values are equal to the values specified in the spec but you will have to explicitly set the height of grid rows. When I tested it in Firefox 42, the padding values were based on the width and height of the grid instead of individual elements. Consequently, all items had equal padding.

但是，在Chrome和Opera中， .element-a所有填充值均为15px， .element-b填充值为35px。 在Firefox 48中，填充值等于规范中指定的值，但您必须显式设置网格行的高度。 当我在Firefox 42中对其进行测试时，填充值基于网格的宽度和高度，而不是单个元素。 因此，所有项目都具有相同的填充。

This is the demo if you want to open it up in different browsers:

如果您想在不同的浏览器中打开它， 这是演示 ：

See the Pen Grid Item Margins and Paddings — CSS Grid Layout by SitePoint (@SitePoint) on CodePen.

见笔电网项目边距和补- CSS网格布局由SitePoint( @SitePoint上) CodePen 。

The diagram below shows the difference between correct and current implementation:

下图显示了正确和当前实现之间的区别：

As you can see, there is no consensus among the implementations or within the CSSWG regarding the right behavior. Therefore, the group has undefined what happens when margins and padding are specified as percentages. The CSSWG hopes that browsers will soon agree upon one of the behaviors and the spec will then be updated to require that behavior to be implemented.

如您所见，在实现之间或CSSWG中就正确的行为没有达成共识。 因此，该组未定义将边距和填充指定为百分比时会发生什么。 CSSWG希望浏览器将尽快就其中一种行为达成共识，然后对规范进行更新以要求实现该行为。

Until then, I suggest developers out there avoid percentages when specifying padding or margin on grid items as you will get different behavior in different browsers.

在此之前， 我建议开发人员在网格项上指定填充或边距时避免使用百分比，因为您将在不同的浏览器中获得不同的行为。

拖放工具准则 (Guidelines for Drag and Drop Tools)

The spec has also added guidelines about reordering and accessibility. Grid layout gives us the power of moving elements around without worrying about the actual ordering of them. However, you are supposed to use this feature responsibly.

该规范还添加了有关重新排序和可访问性的准则。 网格布局使我们可以随意移动元素，而不必担心元素的实际顺序。 但是，您应该负责任地使用此功能。

The grid-placement property does not affect the ordering of elements in non-visual media such as speech. Similarly, rearranging grid items visually won’t affect the default traversal order of sequential navigation modes such as cycling through links on the page.

grid-placement属性不会影响非视觉媒体(如语音)中元素的顺序。 同样，在视觉上重新排列网格项不会影响顺序导航模式的默认遍历顺序，例如在页面上的链接之间循环。

When creating the markup of your website, the ideal order of elements in the DOM is the one in which you want them to appear on the smallest screen size that you are targeting. On larger screen sizes, use the grid-placement properties to visually reorder elements. While these guidelines have been mentioned before in the spec, this time it additionally states that any drag and drop tool or stylesheet that uses grid-placement properties to perform logical ordering is non-conforming.

在创建网站的标记时， DOM中元素的理想顺序是希望它们以最小的屏幕尺寸出现在目标中 。 在较大的屏幕尺寸上，使用grid-placement属性在视觉上重新排列元素。 尽管在规范中已经提到了这些准则，但是这次它还指出，任何使用网格放置属性执行逻辑排序的拖放工具或样式表都是不合格的 。

By following the above guidelines, you will make sure that non-visual media and non-CSS based user agents can rely on the logical source order of the webpage to present content properly.

通过遵循上述准则，您将确保非视觉媒体和非基于CSS的用户代理可以依靠网页的逻辑源顺序来正确呈现内容。

提出了简化的子网格 (A Simplified Subgrid has Been Proposed)

A subgrid, as you may have guessed, is a grid within a grid. To make a grid item a subgrid you will have to use the display: subgrid property. If you read my introductory grid layout article, you might have noticed that there has been no mention of subgrids. That’s because even though the concept sounds simple enough, a subgrid with all its tiny details is pretty hard to explain in a single section of an introductory tutorial. It’s even harder to implement.

您可能已经猜到，子网格是网格中的网格。 要使网格项目成为子网格，您将必须使用display: subgrid属性。 如果您阅读我的介绍性网格布局文章 ，您可能已经注意到没有提及子网格。 这是因为尽管概念听起来很简单，但在入门教程的单个部分中，很难解释一个包含所有微小细节的子网格。 实施起来更加困难。

For this reason, no web engine or polyfill supports them yet. If you are interested in learning more about them, you can read this excellent article on subgrids. To move things ahead, a reduced subgrid proposal has been presented which asks implementations to follow the rules or guidelines listed below.

因此，尚无Web引擎或polyfill支持它们。 如果您想了解更多有关它们的信息，可以阅读有关subgrids的出色文章 。 为了使事情前进，提出了一个简化的子网格建议，要求实现遵循以下列出的规则或准则。

From now on, the subgrid will lay itself out as an ordinary grid item within its parent grid. The placement of items is also supposed to happen before sizing. For sizing purposes, the subgrid will act as if it is completely empty and only take up space defined by its border, margin and padding properties.

从现在开始，子网格将在其父网格内作为普通网格项目进行布局。 项目的放置也应该在调整大小之前进行。 出于调整大小的目的，子网格的作用就好像它完全是空的一样，仅占用其边框，边距和填充属性定义的空间。

The grid items of the subgrid itself will be sized as if they were actually the grid items of its parent. However, if one of the subgrid’s grid items is placed in the first or last track of the subgrid, it will behave as if it had an additional margin on that edge equal to the subgrid’s margin+border+padding on the edge. This may sometimes result in improper alignment within the subgrid but with respect to the parent grid, the elements will still be aligned properly.

子网格本身的网格项目的大小将确定为实际上是其父网格的网格项目。 但是，如果子网格的一个网格项放置在子网格的第一条或最后一条轨道中，它将表现为好像该边缘上的附加边距等于该边缘的边距+边框+边距。 有时这可能会导致子网格内的对齐不正确，但相对于父网格，元素仍将正确对齐。

One more simplification has been proposed. Until now, you could set the values of properties like grid-template-columns and grid-template-rows to be a subgrid. This way, you could create subgrids only in one direction. For example, if you set grid-template-columns to subgrid, the size of columns would be calculated based on the track size defined in the main grid but the rows will be auto-sized.

已经提出了另一种简化方法。 到目前为止，您可以将诸如grid-template-columns和grid-template-rows类的属性的值设置为subgrid 。 这样，您只能在一个方向上创建子网格。 例如，如果将grid-template-columns为subgrid ，则将基于主网格中定义的轨道大小来计算列的大小，但是行将自动调整大小。

Now, subgrid might become a display value instead of a grid-template-* value. This will disallow subgridding behavior along a single axis. In cases where a subgrid is not a grid item in its parent grid, its display value will compute to grid.

现在， subgrid可能会成为显示值，而不是grid-template-*值。 这将不允许沿单个轴的子网格化行为。 如果子网格在其父网格中不是网格项目，则其display值将计算为grid 。

隐式网格中列计数的新规则 (New Rules for Counting Columns in an Implicit Grid)

Before we go further, I would like to explain the difference between implicit and explicit grid:

在继续之前，我想解释一下隐式和显式网格之间的区别：

• Explicit Grid — Properties like grid-template-rows, grid-template-columns and grid-template-areas define a fixed number of tracks that form an explicit grid, a grid that you have explicitly created by supplying your own values.

  显式网格-诸如grid-template-rows ， grid-template-columns和grid-template-areas类的属性定义了固定数量的轨道，这些轨道形成一个显式网格，该网格是通过提供自己的值而显式创建的。

• Implicit Grid — If you position some of the grid items outside the bounds of this grid, the grid container will generate implicit grid tracks by adding implicit grid lines to the grid. These lines along with the explicit grid form our implicit grid.

  隐式网格—如果将某些网格项放置在此网格的边界之外，则网格容器将通过向网格中添加隐式网格线来生成隐式网格轨迹。 这些线与显式网格一起形成我们的隐式网格。

Consider the following CSS:

考虑以下CSS：

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: auto;
  grid-auto-columns: 100px;
}

.element-b {
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 2;
}

Here, I have explicitly specified the width of first 3 columns for my grid using grid-template-columns. Width of the rest of the columns if they need to be created will be equal to 100px each. For the element B, I have set the starting column to be 2 and the ending column to be 6. Since the original grid did not have 6 columns, the browser will automatically create the rest of the columns to fit .element-b. The complete grid structure, including the grids that the browser created, forms the implicit grid:

在这里，我已经使用grid-template-columns为网格明确指定了前三列的宽度。 如果需要创建其余列的宽度，则每个宽度等于100px。 对于元素B，我将开始列设置为2，将结束列设置为6。由于原始网格没有6列，浏览器将自动创建其余列以适合.element-b 。 完整的网格结构(包括浏览器创建的网格)形成隐式网格：

You can take a look at the below CodePen to see a live demo of implicit grids and experiment with different values:

您可以查看下面的CodePen，以观看隐式网格的实时演示并尝试使用不同的值：

See the Pen Explicit and Implicit Grid — CSS Grid Layout by SitePoint (@SitePoint) on CodePen.

见笔显性和隐性网- CSS网格布局由SitePoint( @SitePoint上) CodePen 。

While creating these explicit grids, there were some edge cases which posed problems. Therefore, rules regarding the determination of the number of columns in the implicit grid have changed to accommodate all those scenarios.

在创建这些显式网格时，存在一些边缘问题。 因此，有关确定隐式网格中的列数的规则已更改，以适应所有这些情况。

Initially, the number of columns in the implicit grid was set to be the larger of the following:

最初，隐式网格中的列数设置为以下较大者：

• Number of columns in the explicit grid
  显式网格中的列数
• Largest column span of all items
  所有项目的最大列跨度
• Largest positive column-end line index minus 1 for all items with a definite column position
  具有确定的列位置的所有项目的最大正列尾行索引为负1

In the recent changes to the grid layout, you now have to start with the columns of the explicit grid and then add columns to the beginning or end of the implicit grid to accommodate all items with definite column position. Finally, if the largest column span among all items with no definite column position is still larger than the width of the implicit grid, we add columns to the end of the implicit grid to accommodate the column span.

在最近对网格布局进行的更改中，您现在必须从显式网格的列开始，然后将列添加到隐式网格的开始或结尾以容纳所有具有确定列位置的项 。 最后，如果在没有确定的列位置的所有项目中最大的列跨度仍大于隐式网格的宽度，则将列添加到隐式网格的末尾以适应列跨度。

Another thing that has changed is that grid items are now supposed to be auto-placed into the implicit grid instead of the explicit grid.

另一件事发生了变化，现在应该将网格项自动放置到隐式网格而不是显式网格中。

其他变化 (Other Changes)

There have been a few minor updates as well:

也有一些小的更新：

• The spec has now clarified that negative gutter values are invalid and gutters will be omitted at fragmentation breaks. Fragmentation breaks are now also allowed between grid columns.
  规范现已阐明，负装订线值无效，并且在碎片中断时将忽略装订线。 现在也可以在网格列之间允许分段中断。
• Earlier, the spec mentioned that if the placement of a grid item contains two lines, and the start line is further end-ward than the end line, the two lines should be swapped. There was no mention about how to handle when the start line is equal to the end line. The newer version of draft states that in this case the end line should be removed.
  早先，该规范提到如果网格项目的放置包含两行，并且起始行比结束行更靠末端，则应交换这两行。 没有提到当开始线等于结束线时如何处理。 较新版本的草稿指出，在这种情况下，应删除终点线。

• The spec has also defined a better grid shorthand syntax that allows us to set all the explicit and implicit grid properties as well gutter properties in a single declaration.

  规范还定义了更好的网格速记语法 ，该语法使我们能够在单个声明中设置所有显式和隐式网格属性以及装订线属性。

最后的想法 (Final Thoughts)

Those are the main changes in the Grid Layout working draft so far! Areas like subgrids are expected to change and evolve quite quickly as they are discussed further. You can go over a summary of all these changes on the Grid Layout Module’s draft page if you’d like to look into it some more. I hope the exploration above has helped give you an idea of where grid layouts are headed.

这些是到目前为止“网格布局”工作草案中的主要更改！ 随着进一步的讨论，像子网格这样的区域有望发生变化并Swift发展。 如果您想进一步研究一下，可以在“网格布局模块”的草稿页上查看所有这些更改的摘要。 我希望以上探索能帮助您了解网格布局的发展方向。

Remember, the future of web development is open to developer input, so if you’ve got any feedback related to the module you should send it to CSSWG by filing an issue in GitHub or by sending mail to the archived public mailing list www-style@w3.org with the spec code ([css-grid]) and your comment topic in the subject line. You can also email one of the editors of the module and ask them to forward your suggestion.

记住，Web开发的未来对开发人员开放，因此，如果您有与模块相关的任何反馈，则应通过在GitHub上提交问题或将邮件发送到已归档的公共邮件列表www-style来将其发送给CSSWG。 @ w3.org，带有规范代码([css-grid])和主题行中的评论主题。 您也可以通过电子邮件发送该模块的一名编辑，并要求他们转发您的建议。

翻译自: https://www.sitepoint.com/where-things-are-at-in-the-css-grid-layout-working-draft/