css 网格布局_CSS网格布局：命名网格线和区域

css 网格布局

Updated 10 May 2013, to add some corrections, clarifications and new information. Thanks to Tab Atkins Jr. for this detailed response on www-style

2013年5月10日更新，添加了一些更正，说明和新信息 。 感谢Tab Atkins Jr. 对www-style的详细回复

I really like Grid, as I explained to the Front Trends audience last week, my presentation The New CSS Layout is partly so I have an excuse to tell people about Grid. I also get quite excited about Regions and Exclusions but I feel Grid needs some love from the design and development community.

我真的很喜欢Grid，正如我上周向“ 前沿趋势”观众解释的那样，我的演讲“新CSS布局”的部分内容是，因此我有借口向人们介绍Grid。 我也对区域和排除感到非常兴奋，但是我觉得Grid需要设计和开发社区的一些关爱。

Feedback is being actively requested for this module, however it is pretty tricky to give feedback on a module that doesn’t really have any implementation. Therefore I’m reading the spec so you don’t have to and will post my thoughts and experiments as I make them. As I mentioned in my last article, some of this might change, some of it I may have misinterpreted. If you know better than I do please leave a comment and I’ll update the article.

正在积极要求对此模块提供反馈，但是，对于实际上没有任何实现的模块提供反馈非常棘手。 因此，我正在阅读规格，因此您不必这样做，并且会在我制作它们时发表我的想法和实验。 正如我在上一篇文章中提到的那样，其中某些可能会更改，某些可能会被我误解。 如果您比我了解得更多，请发表评论，我将更新本文。

I explained in my previous post how we place items on the grid using the grid placement properties and numerical values, I also cover this in my presentation. However specifying things by number has a couple of problems as several people that I discussed this with at Front Trends noted.

我在上一篇文章中解释了如何使用网格放置属性和数值将项目放置在网格上，我也在演示文稿中对此进行了介绍。 但是，按数字指定事物有几个问题，正如我在《前沿趋势》中与几个人讨论过的那样。

Firstly changes to the grid, for example adding a column, mean that every item will need to have it’s position updated.

首先，更改网格，例如添加一列，这意味着每个项目都需要更新其位置。

Secondly, placing items by number means you constantly have to hold in your head a model of the grid to be able to place elements onto it. If you are placing elements programmatically then the numeric values make more sense than if you are building a layout by hand.

其次，按数字放置项目意味着您必须不断地牢牢抓住网格模型才能将元素放置到网格上。 如果您以编程方式放置元素，则数字值比手工构建布局更有意义。

To attempt to solve these problems the Working Draft contains a proposal to assign names to grid lines and also areas of the grid, so that’s the bit of the spec I have been reading over the last few days.

为了尝试解决这些问题，工作草案包含了为网格线以及网格区域分配名称的建议，这就是我最近几天一直在阅读的规范。

命名网格线 (Named grid lines)

When you define your grid, you specify the columns that make up the grid.

定义网格时，可以指定组成网格的列 。

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

When you place items on the grid, you specify the grid lines that surround that content area.

将项目放在网格上时，可以指定围绕该内容区域的网格线。

If you want to name your grid lines, the proposal is that you will do it like this. Note that the name is for the line, the actual column width or height comes afterwards. You can have multiple names for the same line just by putting them one after the other, each wrapped in quotes, before the column or row size definition – I have done this for the column named as both “sidebar and “ads”.

如果要命名网格线，建议您这样做。 请注意，该名称是该行的名称，随后是实际的列宽或高。 您可以在同一行中具有多个名称，只需在列或行大小定义之前将它们一个接一个，每个都用引号引起来即可–我已经为名为“ sidebar”和“ ads”的列做到了这一点。

.wrapper {  
  display: grid;  
  grid-definition-columns: "nav" 200px 
                           "gutter"  20px 
                           "main" auto 
                           "gutter" 20px 
                           "sidebar" "ads" 200px;  
  grid-definition-rows: "header" auto "content" 1fr; "content-end"  
}
.wrapper {  
  display: grid;  
  grid-definition-columns: "nav" 200px 
                           "gutter"  20px 
                           "main" auto 
                           "gutter" 20px 
                           "sidebar" "ads" 200px;  
  grid-definition-rows: "header" auto "content" 1fr; "content-end"  
}
 

You can then place items using the named line, rather than the number.

然后，您可以使用命名行而不是数字来放置项目。

This solves the problem of columns being added to the grid, making all the grid placement values incorrect. I think it will also make more sense for responsive design, you can redefine the grid using media queries, but content is always placed after the content row line for example no matter what they actual row grid line value.

这解决了将列添加到网格的问题，使所有网格放置值都不正确。 我认为这对于响应式设计也将更有意义，您可以使用媒体查询重新定义网格，但是内容始终位于内容行之后，例如无论实际行网格行的值是多少。

In the above example I have two lines named “gutter”, this is valid, but how does the browser know which “gutter” line I mean?

在上面的示例中，我有两行名为“装订线”，这是有效的，但是浏览器如何知道我的意思是“装订线”呢？

When positioning items you can also use the span keyword. I found the spec pretty confusing here and my original article had a couple of errors, one I think caused by an earlier reading of the spec. I have updated this section as of 10th May 2013 to match the clarifications in the email linked at the start of this post

在放置项目时，您也可以使用span关键字。 我在这里发现规范非常混乱，我的原始文章有几个错误，我认为是由于较早阅读该规范引起的。 自2013年5月10日起，我已经更新了此部分，以匹配本文开头链接的电子邮件中的说明

If you take this rule:

如果您遵循以下规则：

.nav
  grid-start: "nav";
  grid-end: "gutter";
}
.nav
  grid-start: "nav";
  grid-end: "gutter";
}
 

The content area would begin at the first line – named nav – and end at the first gutter line as you might expect, however if you wanted the content to sit in the main content area of the page and end at the next gutter you need to use the span keyword. This shows that you don’t want the first gutter but that you want to start counting gutter lines after the line named main.

内容区域将在第一行（称为nav）开始，并按您期望的那样在第一装订线结束，但是，如果您希望将内容放在页面的主要内容区域中，并在下一个装订线结束，则需要使用span关键字。 这表明您不希望有第一个装订线，而是要开始对名为main的行之后的装订线进行计数。

This hacking around the lack of proper gutters looks to be a temporary thing. There is discussion on www-style regarding using column-gap much in the same way as it is used in multi-column layout. I think this would solve one of the current big issues with grid.

围绕适当的装订线的这种黑客攻击似乎是暂时的。 关于使用列间距的讨论方式与在多列布局中使用的方式相同， 在www风格上有很多讨论 。 我认为这将解决当前网格的重大问题之一。

网格模板–用于命名网格区域 (Grid template – for named grid areas)

We can also name areas of the grid. We do this with the grid-template property on the element that has been set to display: grid. We create this template with named areas as a value of grid-template.

我们还可以命名网格的区域。 我们使用已设置为显示的元素上的grid-template属性执行此操作：grid。 我们使用命名区域作为grid-template的值来创建此模板。

.wrapper {  
  display: grid;  
  grid-definition-columns: 200px 20px auto 20px 200px;  
  grid-definition-rows: auto 1fr; 
  grid-template: "header header header header header"
                       "nav . content . sidebar" 
}
.wrapper {  
  display: grid;  
  grid-definition-columns: 200px 20px auto 20px 200px;  
  grid-definition-rows: auto 1fr; 
  grid-template: "header header header header header"
                       "nav . content . sidebar" 
}
 

If you want an area to span the entire grid – such as my header – then you should place it into each column of the template.

如果要使某个区域跨越整个网格（例如我的标题），则应将其放置在模板的每一列中。

Once we have defined our grid and set up a template. We position items into these areas using the grid-area property.

一旦定义了网格并设置了模板。 我们使用grid-area属性将项目放置在这些区域中。

Again, this helps to solve the issue of the grid becoming redefined, and makes changing placement more straightforward in a responsive design context.

再次，这有助于解决网格重新定义的问题，并使响应式设计环境中的布局更改更直接。

Why would you use one method over the other? From my basic experiments I think that the line based placement will be more useful for complex layouts, and for replicating existing grid systems such as the 12 and 16 column grids commonly used. I’ve attempted to create such a grid, although without any browser to test this in I can’t be sure as to the accuracy of this example. What the named grid lines give us over the old version of the spec that is implemented in IE10 is the ability to place items on the grid without needing to do any kind of calculation across rows and columns to account for gutters.

为什么要使用一种方法而不是另一种方法？ 从我的基础实验中，我认为基于行的放置方式对于复杂的布局以及复制现有的网格系统（例如常用的12列和16列网格）将更加有用。 我尝试创建这样的网格，尽管没有任何浏览器可以测试此网格，但我不确定此示例的准确性。 与IE10中实现的规范的旧版本相比，命名的网格线为我们提供的功能是能够将项目放置在网格上，而无需在行和列之间进行任何类型的计算来解决装订线问题。

Compare the named grid lines version of the flexible grid with my original from my 24 Ways article. In the 24 Ways example I had to use a preprocessor to do the calculation, you could of course still use a preprocessor to make generating this syntax easier and there is also a shorthand syntax, I just feel that while I am still figuring it out it is easier to stick with the longhand to see what is going on!

将柔性网格的命名网格线版本与我的24 Ways文章的原始 版本进行比较。 在24 Ways示例中，我必须使用预处理器进行计算，您当然仍然可以使用预处理器来简化生成该语法的过程，并且还有一种简化的语法，我只是觉得尽管我仍在弄清楚它更容易坚持使用长手来看看发生了什么！

If you have a fairly simple layout then the template based method may be the most straightforward, combined with Flexbox for smaller UI elements you could avoid the complexity of named grid lines and just target simple areas.

如果布局相当简单，则基于模板的方法可能是最简单的方法，与Flexbox结合使用以实现较小的UI元素，您可以避免命名网格线的复杂性，而只针对简单区域。

The working Group have asked for feedback, with the example above and the more complex one I posted on CodePen I just tried to figure out how I would implement typical layouts using this. I think that is a pretty good place to start. Could you create the layouts you want to create using Grid? If not, why not? Can you think of better naming for the Grid Placement Properties? This is the point at which it is possible to influence how a specification develops, once it gets to Candidate Recommendation Level major changes are unlikely to be made, so it is in all of our interests to think about this stuff and post our thoughts.

工作组要求获得反馈 ，上面的示例以及我在CodePen上发布的更复杂的示例只是试图弄清楚如何使用此示例来实现典型的布局。 我认为这是一个很好的起点。 您可以使用网格创建要创建的布局吗？ 如果没有，为什么不呢？ 您能想到更好的网格放置属性命名吗？ 一旦达到候选推荐标准，就不可能在此处影响规范的发展，因此，不大可能进行重大更改，因此考虑这些内容并发表我们的想法符合我们的全部利益。

翻译自: https://rachelandrew.co.uk/archives/2013/04/29/css-grid-layout-named-grid-lines-and-areas/

css 网格布局