css 网格布局_CSS网格布局：解决装订线问题

css 网格布局

In my recent conference presentations on the emerging CSS Grid Layout specification I’ve pointed out some of the issues I’ve encountered when learning to use this specification.

在最近的有关新兴CSS网格布局规范的会议演讲中 ，我指出了在学习使用此规范时遇到的一些问题。

When explaining the spec, one issue that is consistently raised is the lack of “gutters”. If you want spacing between grid tracks, you have to create a gutter track as demonstrated in this example.

在解释规范时，始终提出的一个问题是缺少“装订线”。 如果要在网格轨道之间保持间距，则必须创建一个排水沟轨道，如本示例所示。

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

The 10px tracks are acting as row and column gutters, however as far as grid is concerned these are tracks just as any other track, so we have to work around them. To place an item in the second content track of the grid we have to position it starting on grid column line 3. That’s the line after the gutter that starts on line 2.

10px轨道用作行和列装订线，但是就网格而言，这些轨道与其他任何轨道一样，因此我们必须解决它们。 要将项目放置在网格的第二个内容轨道中，我们必须将其放置在网格列第3行上。这是从第2行开始的装订线之后的行。

View the example (needs Chrome with Experimental Web Platform Features flag on)

查看示例 （需要启用了“实验性网络平台功能”标志的Chrome）

This issue can be seen clearly in more complex grid systems. Take my 12 column ‘skeleton’ grid as an example. In the repeat syntax I need to set up a grid with column tracks and gutter tracks.

在更复杂的网格系统中可以清楚地看到此问题。 以我的12列“骨架”网格为例 。 在重复语法中，我需要设置一个具有列轨道和装订线轨道的网格。

.wrapper {
  display: grid;
  grid-template-columns: repeat(11, [col] 4fr [gutter] 3.5fr ) [col] 4fr [gutter];
  grid-template-rows: auto repeat(4, [row] auto [gutter] 15px);
}.wrapper {
  display: grid;
  grid-template-columns: repeat(11, [col] 4fr [gutter] 3.5fr ) [col] 4fr [gutter];
  grid-template-rows: auto repeat(4, [row] auto [gutter] 15px);
} 

We then position elements on the grid using those col and gutter tracks.

然后，我们使用这些col和gutter轨道将元素定位在网格上。

Even more troublesome is the fact that if you want to get grid to place items using the auto-placement algorithm (as shown in this example) you can’t have defined gutter tracks because grid will try and place items into them as it has no way to know which tracks you meant for gutters and which for content.

更麻烦的是，如果您想让网格使用自动放置算法来放置项目（如本示例所示），您将无法定义装订线轨迹，因为网格会尝试将项目放置到其中，因为它没有知道您对装订线和内容的了解的方式。

In my example I’ve used margins and padding to create spacing between items on the grid. This seems something of a fudge in an otherwise elegant specification.

在我的示例中，我使用了边距和填充来在网格上的项目之间创建间距。 在本来优雅的规范中，这似乎是一种错误。

When I initially raised this on www-style it was accepted that gutters were useful, however it was initially pushed to Level 2 of the spec. This made me sad, as I believed the lack of gutters made the spec more complex to get into. Everything I’ve been doing around Grid has been to try and encourage people to get into the spec, to start playing with it.

当我最初以www风格提出此问题时，人们承认装订线很有用，但是最初被推到规格的第2级。 这让我感到很难过，因为我相信缺少装订线会使规格变得更加复杂。 我围绕Grid所做的所有事情都是试图鼓励人们加入规范，并开始使用它。

However, after having the chance to chat to specification author Fantasai at CSS Day, I put my case again and she has written row-gap and column-gap into the Level 1 Editor’s Draft. These properties function in much the same way as column-gap in multiple-column layout.

但是，在有机会在CSS Day与规范作者Fantasai聊天之后，我再次提出了自己的建议，她将行距和列距写到了Level 1 Editor's Draft中 。 这些属性的功能与多列布局中的列间隙大致相同。

在实践中这意味着什么？ (What does this mean in practice?)

Let’s have a look at some of my examples. My simple example can now be written as:

让我们看一些我的例子。 我的简单示例现在可以写成：

.wrapper {
display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: auto;
  column-gap: 10px;
  row-gap: 10px;
}.wrapper {
display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: auto;
  column-gap: 10px;
  row-gap: 10px;
} 

Our complex grid system can now lose the gutter tracks, and as column and row gap falls in-between columns and rows and doesn’t add a trailing column or row I don’t need to tidy up the pattern.

现在，我们复杂的网格系统可能会丢失排水沟轨迹，并且当列和行之间的间隙落在列和行之间并且不需要添加尾随列或行时，我不需要整理模式。

Placing items on this grid becomes again more simple.

将项目放置在此网格上变得更加简单。

.mainheader {
  grid-column: col / span 12;
  grid-row: 1;
}

.mainfooter {
  grid-column: col / span 12;
  grid-row: 3;
}

.content {
  grid-column: col 5 / span 8;
  grid-row: 2;
}

.panel {
  grid-column: col / span  4;
  grid-row: 2;
}.mainheader {
  grid-column: col / span 12;
  grid-row: 1;
}

.mainfooter {
  grid-column: col / span 12;
  grid-row: 3;
}

.content {
  grid-column: col 5 / span 8;
  grid-row: 2;
}

.panel {
  grid-column: col / span  4;
  grid-row: 2;
} 

With auto-placement we can now avoid using margins and instead use the row-gap and column-gap properties controlling the spacing easily – even adjusting the spacing for different breakpoints.

通过自动放置，我们现在可以避免使用边距，而可以使用行间隙和列间隙属性轻松控制间距-甚至可以为不同的断点调整间距。

These properties were only added to the specification this week, so aren’t in the implementation in Chrome yet.

这些属性仅在本周才添加到规范中，因此尚未在Chrome中实现。

对新兴规范感兴趣-这很重要！ (Take interest in emerging specifications – it matters!)

I’m really pleased to see these properties being added to the specification, even if it does mean I need to rewrite chunks of my presentation again! In addition to this simplifying the spec for designers and developers it also demonstrates something I keep telling people when I present on the subject. The specification authors, and the CSS WG, are interested in the thoughts of people who use the specifications to build websites. The time to get your thoughts heard is while a specification is in development. If you point out issues once a specification is out of Working Draft then your feedback is too late for that level. CSS Grid Level 1 will hopefully be complete this summer, and there are many other specifications needing feedback.

我很高兴看到这些属性被添加到规范中，即使这确实意味着我需要再次重写演示文稿的大部分内容！ 除了简化设计人员和开发人员的规范外，它还展示了我在演讲时不断告诉别人的事情。 规范作者和CSS WG对使用规范来构建网站的人们的想法很感兴趣。 制定规范时，是时候表达您的想法了。 如果您在规范超出工作草案后指出问题，那么对于该级别您的反馈为时已晚。 CSS Grid Level 1有望在今年夏天完成，还有许多其他规范需要反馈。

Have a look at the things that are coming, play with them, imagine the future version of you who gets to use them in your day to day work. Be an active part of the future web.

看看即将发生的事情，与他们一起玩，想象一下您的未来版本，他们会在日常工作中使用它们。 成为未来网络的活跃部分。

翻译自: https://rachelandrew.co.uk/archives/2015/06/19/css-grid-layout-solving-the-gutter-problem/

css 网格布局