css 网格布局_CSS网格布局-发生了什么变化？

css 网格布局

Towards the end of last year I did some research into the proposed CSS Grid Layout module for my book CSS3 Layout Modules for Five Simple Steps and also an article for 24 Ways. Both of these were heavily based on the Internet Explorer 10 implementation, as that was (and is) the only real implementation of Grid so far.

去年年底，我对我的书“五个简单步骤的CSS3布局模块 ”和“ 24种方法的文章”中提议的CSS网格布局模块进行了一些研究。 两者都很大程度上基于Internet Explorer 10的实现，因为这是（并且是）迄今为止唯一的真正的Grid实现。

Since then a new Working Draft has been published which makes some changes to the proposed module. I’m preparing a new talk based on my exploration of the new CSS layout modules and, having researched these changes, I thought it worth writing them up. The latest Working Draft can be found on the W3C website – CSS Grid Layout.

此后，发布了新的工作草案，该草案对提议的模块进行了一些更改。 根据对新CSS布局模块的探索，我正在准备一个新演讲，并且在研究了这些更改之后，我认为值得将它们编写出来。 最新的工作草案可以在W3C网站上找到-CSS Grid Layout 。

If you spot any errors in this let me know. I am very much a “try it and see how it works” sort of person, so it is a definite challenge to write about things that don’t yet have an implementation. Add a comment if you think any of this looks incorrect and I’ll update the article and credit you of course.

如果您发现任何错误，请通知我。 我是一个“尝试一下，看看它如何工作”的人，因此，撰写尚无实现的事情是一个绝对的挑战。 如果您认为其中任何一个看起来不正确，请添加评论，我将对本文进行更新并向您表示感谢。

My 24 Ways article is a reasonable example of the Grid Layout properties currently supported by IE10.

我的24 Ways文章是IE10当前支持的Grid Layout属性的合理示例。

If you have not yet come across Grid, it enables us to declare a grid on a parent element and then layout child elements based on a position within the Grid. The exciting part of this for me is that we can lay them out independently of source order. This will be useful in particular for responsive design where elements may make more sense in order order when displayed on a phone touch screen and another on a large monitor.

如果尚未遇到Grid，它使我们能够在父元素上声明网格，然后根据Grid中的位置来布局子元素。 对我来说，令人兴奋的部分是我们可以独立于源顺序来进行布局。 这对于响应式设计特别有用，在响应式设计中，当元素显示在电话触摸屏上，而另一个显示在大型监视器上时，元素在顺序上可能更有意义。

IE10 supports the following properties with the -ms prefix, some of which have been deprecated and changed in later Working Drafts.

IE10支持以下带有-ms前缀的属性，其中某些属性已在以后的工作草案中弃用并更改。

创建网格 (Creating a grid)

display: grid (as display: -ms-grid) and display: inline-grid (as display: -ms-inline-grid )

显示：网格（如显示：-ms-grid）和显示：内联网格（如显示：-ms-inline-grid）

Declares a grid on a parent element. These are new values for the display property. You can nest a grid inside another grid, however the spec also proposes an additional value for the display property of subgrid. This is not implemented in IE10.

在父元素上声明一个网格。 这些是display属性的新值。 您可以在另一个网格内嵌套一个网格，但是该规范还为subgrid的display属性提出了一个附加值。 IE10中未实现。

If you have a parent element set to display: grid then the items within it act as grid items and therefore must be positioned on the grid. If one of those items also has display:grid set then the items inside it must be positioned within that child grid.

如果您将父元素设置为display: grid则其中的项目将充当网格项目，因此必须位于网格上。 如果其中一项也设置了display：grid，则其中的各项必须位于该子网格内。

If you set one of the child items to display: subgrid the items inside it remain part of the parent grid and can therefore align to elements within the parent. There is an example within the Working Draft of how this should work, however there are also some questions of implementation.

如果将子项之一设置为display: subgrid对子项进行display: subgrid将保留其父网格的一部分，因此可以与父项中的元素对齐。 工作草案中有一个示例 ，说明应如何工作，但是也存在一些实施问题。

定义网格 (Defining the grid)

The grid-columns (as -ms-grid-columns) and grid-rows (as -ms-grid-rows) properties

网格列（如-ms-grid-columns）和网格行（如-ms-grid-rows）属性

Once you have declared a grid on an element you must also set up the rows and columns on that grid. These properties, as implemented in IE10, have been deprecated. The new names for the properties are grid-definition-columns and grid-definition-rows.

在元素上声明网格后，还必须在该网格上设置行和列。 IE10中实现的这些属性已被弃用。 这些属性的新名称是grid-definition-columns和grid-definition-rows 。

Therefore the code that currently works in IE10 to create a two row, five column grid looks like this.

因此，当前在IE10中可用于创建两行五列网格的代码如下所示。

.wrapper {    
  display: -ms-grid;    
  -ms-grid-columns: 200px 20px auto 20px 200px;    
  -ms-grid-rows: auto 1fr; 
}
.wrapper {    
  display: -ms-grid;    
  -ms-grid-columns: 200px 20px auto 20px 200px;    
  -ms-grid-rows: auto 1fr; 
}
 

According to the current Working Draft it would now be:

根据当前的工作草案，现在将是：

There are a variety of ways to specify track sizing, and the following are implemented in IE10.

有多种方法可以指定轨道大小，以下是在IE10中实现的。

• Standard length units – pixels, ems etc. or a percentage value.
• Keywords – auto, min-content, max-content, minmax(a,b)
• Fraction units – 1fr, 2fr etc.

• 标准长度单位-像素，ems等或百分比值。
• 关键字–自动，最小含量，最大含量，最小最大（a，b）
• 分数单位– 1fr，2fr等

You can specify these values individually or using a repeating syntax. Therefore the following two declarations are the same.

您可以单独指定这些值，也可以使用重复语法。 因此，以下两个声明是相同的。

.wrapper {          
  display: -ms-grid;    
  -ms-grid-columns: 1fr 4.25fr 1fr 4.25fr 1fr 4.25fr 1fr 4.25fr 1fr;    
  -ms-grid-rows: auto 20px auto 20px; 
}

.wrapper {          
  display: -ms-grid;    
  -ms-grid-columns: 1fr 4.25fr 1fr 4.25fr 1fr 4.25fr 1fr 4.25fr 1fr;    
  -ms-grid-rows: auto 20px auto 20px; 
}

.wrapper {          
  display: -ms-grid;    
  -ms-grid-columns: 1fr (4.25fr 1fr)[4];    
  -ms-grid-rows: (auto 20px)[2]; 
}
.wrapper {          
  display: -ms-grid;    
  -ms-grid-columns: 1fr (4.25fr 1fr)[4];    
  -ms-grid-rows: (auto 20px)[2]; 
}
 

However the current Working Draft has this repeat syntax detailed a little differently using repeat notation, so my above example would be as follows using the new properties and the updated repeat syntax. The repeat notation has a number (the number of times to repeat the pattern) a comma and then the pattern to repeat.

但是，当前的工作草案使用重复符号对重复语法进行了详细的说明，因此，我的上述示例将使用新属性和更新的重复语法如下。 重复符号的编号（重复图案的次数）为逗号，然后为重复图案。

放置网格项目 (Placing Grid Items)

In the IE10 implementation, items are positioned on the grid using the following properties:

在IE10实施中，使用以下属性将项目放置在网格上：

• -ms-grid-row
• -ms-grid-column
• -ms-grid-row-align
• -ms-grid-column-align
• -ms-grid-row-span
• -ms-grid-column-span

• -ms-grid-row
• -ms-grid-column
• -ms-grid-row-align
• -ms-grid-column-align
• -ms-grid-row-span
• -ms-grid-column-span

In my 24 Ways article and associated CodePen examples you can see these all in action. There are a number of changes in the current Working Draft.

在我的24 Ways文章和相关的CodePen示例中，您可以看到所有这些内容。 当前的工作草案中有许多更改。

网格行和网格列属性 (The grid-row and grid-column properties)

These are shorthand properties, grid-row combines the new properties grid-before and grid-after, grid-column combines grid-start and grid-end. I’ve had a bit of trouble wrapping my head around these grid-placement properties and the Working Draft even includes the following note.

这些是速记属性，grid-row结合了grid-before和grid-after的新属性，grid-column结合了grid-start和grid-end。 我在将这些网格放置属性包裹起来时遇到了一些麻烦，“工作草案”甚至包括以下注释。

These are somewhat awkward, but nobody’s been able to come up with a clearer set of four property names. If anyone has suggestions, please, please post them. (Other syntax improvement suggestions are also welcome.)

这些有点尴尬，但是没人能提出更清晰的四个属性名称。 如果有人有建议，请发表。 （也欢迎其他语法改进建议。）

If I have this wrong, then hopefully someone will come along with a better example!

如果我有这个错误，那么希望有人会提供更好的例子！

新的网格放置属性 (New grid placement properties)

How these seem to work is that they essentially define the borders of the area into which the content sits. So columns have a start and an end line, rows have a before and an after line.

这些看起来如何工作是因为它们本质上定义了内容所在区域的边界。 因此，列具有开始和结束行，行具有之前和之后行。

If we take a look at my example from the 24 Ways tutorial we can see how I would need to change it to meet the new Working Draft.

如果我们从24 Ways教程中查看我的示例，我们可以看到我将需要如何对其进行更改以适应新的工作草案。

.wrapper {    
  display: -ms-grid;    
  -ms-grid-columns: 200px 20px auto 20px 200px;    
  -ms-grid-rows: auto 1fr; 
}

.wrapper {    
  display: -ms-grid;    
  -ms-grid-columns: 200px 20px auto 20px 200px;    
  -ms-grid-rows: auto 1fr; 
}

.content {    
  -ms-grid-column: 3;    
  -ms-grid-row: 2;    
  -ms-grid-row-span: 1; 
}
.content {    
  -ms-grid-column: 3;    
  -ms-grid-row: 2;    
  -ms-grid-row-span: 1; 
}
 

So here I have declared a grid on the .wrapper element. I have used the grid-columns property to create a grid with a 200 pixel-wide column, a 20 pixel gutter, a flexible width auto column that will stretch to fill the available space, another 20 pixel-wide gutter and a final 200 pixel sidebar: a flexible width layout with two fixed width sidebars. Using the grid-rows property I have created two rows.

所以在这里，我在.wrapper元素上声明了一个网格。 我已使用grid-columns属性创建了一个网格，该网格具有200像素宽的列，20像素的装订线，灵活宽度的自动列（将拉伸以填充可用空间），另一个20像素宽的装订线和最后的200像素边栏：具有两个固定宽度的边栏的灵活宽度布局。 使用grid-rows属性，我创建了两行。

I then have a div with a class of content that I want to place into the centre column (this is the auto one) and second row (the one specified as 1fr.

然后，我有一个div，其中包含一类内容，我想将其放入中心列（这是自动行）和第二行（指定为1fr）。

In the new draft this would look like this.

在新草案中，它看起来像这样。

The content definition could also be written as:

内容定义也可以写成：

.content {    
  grid-column: 3/4;    
  grid-row: 2/3; 
}
.content {    
  grid-column: 3/4;    
  grid-row: 2/3; 
}
 

The row-span and column-span properties are not required as this syntax specifies a start and end point for each element and therefore span makes less sense. There is a value of span that can be used as a value for the grid placement properties, though this makes more sense when used alongside the ability to name grid lines – perhaps a subject for a future article.

不需要行跨度和列跨度属性，因为此语法为每个元素指定了起点和终点，因此跨度意义不大。 尽管可以将span值用作网格放置属性的值，但是将其与命名网格线的功能结合使用时更有意义（也许是将来文章的主题）。

I have updated one of my Examples from the 24 Ways article to the new syntax. Although with the new idea of working to grid lines I think there might be better ways of stating where items should be placed using LESS (or your tool of choice). I’ll think a bit more about that – and if you have any thoughts add them to the comments.

我已经将示例之一从24 Ways文章更新为新语法 。 尽管我有了处理网格线的新想法，但我认为可能会有更好的方法来说明应使用LESS （或您选择的工具）在何处放置物品。 我会对此进行更多考虑-如果您有任何想法，请将其添加到评论中。

翻译自: https://rachelandrew.co.uk/archives/2013/04/10/css-grid-layout---what-has-changed/

css 网格布局