css 网格布局_CSS网格布局-创建复杂的网格

css 网格布局

With the Blink and Webkit implementation moving on at great pace, a number of updates to the specification, and Mozilla announcing an Intent to implement CSS Grid Layout, 2015 really is shaping up to be a good year for Grid. As part of my exploration I’ve been looking for good examples of grids in use to rebuild, to see how Grid works for these uses.

随着Blink和Webkit实现的快速发展，对该规范的大量更新以及Mozilla宣布实现 CSS Grid Layout的意图，对于 Grid来说，2015年确实是好年。 作为探索的一部分，我一直在寻找用于重建的网格的良好示例，以了解Grid如何用于这些用途。

In this post I’ve assumed a bit of Grid knowledge, so if you need an introduction to the CSS Grid Layout Module then take a look at my Grid by Example site.

在这篇文章中，我假设了一些Grid知识，因此，如果您需要CSS CSS Grid Layout Module的简介，请查看我的Grid by Example网站。

I’ve been looking at the Susy Grid recently. Susy claims to be a semantic grid system – as in it doesn’t require that you pepper your markup with classes to control the grid. It’s also “grids on demand”, you create the grids you need in your Sass, and Susy creates the CSS for you. Crucially, Susy deals with the often complex mathematics needed to use grid structures with the layout tools we currently have.

我最近一直在看Susy Grid 。 Susy声称是一个语义网格系统–因为它不需要您在标记中添加类来控制网格。 它也是“按需网格”，您在Sass中创建所需的网格，而Susy为您创建CSS 。 至关重要的是，Susy处理了当前使用的布局工具来使用网格结构所需的通常很复杂的数学。

My experiments have left me impressed. The current state of CSS layout means that unless you like to spend a lot of time doing calculations something like Susy is really useful. The output CSS is pretty much what I’d come up with myself, which to me is the acid test for tool use, “does it write what I would but faster?”

我的实验给我留下了深刻的印象。 CSS布局的当前状态意味着，除非您愿意花费大量时间进行计算，否则类似Susy的东​​西将非常有用。 输出的CSS几乎就是我自己想得到的，对我来说这是对工具使用的严格测试， “它写得比我想的还要快吗？”

Back to CSS Grid Layout. It should remove the need for preprocessor based solutions for the maths at least, as with Grid Layout you don’t need to do complex calculations to position elements. Let’s test that out.

返回CSS网格布局。 至少应该消除对基于预处理器的数学解决方案的需求，因为使用网格布局，您无需进行复杂的计算即可定位元素。 让我们测试一下。

I found this post about Susy. The author takes a relatively complex grid and uses Susy to lay it out. It’s a good example of what Susy can do, so can we achieve this with the Grid Layout Module?

我发现了有关Susy的帖子 。 作者采用了一个相对复杂的网格，并使用Susy对其进行布局。 这是Susy可以做什么的一个很好的例子，那么我们可以使用Grid Layout Module实现吗？

HTML和样式CSS (The HTML and styling CSS)

I took the HTML for the Grid and the styling for the coloured boxes directly from the article, and just added a bit of text styling for the headings. Without any layout applied it looks like this.

我直接从文章中获取了Grid的HTML和彩色框的样式，并为标题添加了一些文本样式。 没有应用任何布局，它看起来像这样。

We need to set up our 10 column grid using the div with a class of container.

我们需要使用带有一类容器的div来设置10列网格。

.container {
  width: 90%;
  margin: 0 auto 0 auto;
  display: grid;
  grid-template-columns:  (col ) 4.25fr repeat(9, (gutter) 1fr (col) 4.25fr ) (gutter);
  grid-template-rows: auto repeat(5, 100px);
}.container {
  width: 90%;
  margin: 0 auto 0 auto;
  display: grid;
  grid-template-columns:  (col ) 4.25fr repeat(9, (gutter) 1fr (col) 4.25fr ) (gutter);
  grid-template-rows: auto repeat(5, 100px);
} 

The value of the grid-template-columns property gives me a line with a name of col, with a grid track of 4.25 fraction units. I then repeat a pattern of a line named gutter, then a 1 fraction unit gutter track and the col line and track nine times. I finish off with a line named gutter.

grid-template-columns属性的值给我一行名称为col的网格，网格轨迹为4.25分数单位。 然后，我重复一个模式，命名为装订线，然后重复1个小数单位装订线轨迹以及col线和轨迹9次。 我以一条名为装订线的线结束。

For the rows I have created a single row with a height of auto to place the header in and then a repeating pattern of five 100 pixels rows.

对于这些行，我创建了一行高度为auto的行，以将标题放置在其中，然后重复了五行100像素行的模式。

I don’t need to give the rows a fixed height but it makes the example a little clearer.

我不需要将行设置为固定的高度，但这会使示例更加清晰。

I’m using named lines and line-based placement for this complex grid, and it really is just a case of popping each block onto the grid, pretty straightforward.

我正在为这个复杂的网格使用命名线和基于行的放置 ，这实际上只是将每个块弹出到网格的一种情况，非常简单。

嵌套网格 (Nested Grids)

In the example we have some nested elements. The div with the class ag2 contains ag4 to ag7. The div with the class ag7 is then a wrapper for ag8 to 10.

在示例中，我们有一些嵌套元素。 类别为ag2的div包含ag4至ag7。 然后，类ag7的div是ag8到10的包装器。

We need to make each of these nested grids a grid too. Once they become a grid we have to declare columns and rows and position their children on the new Grid, not the Grid declared on the outer.

我们也需要使每个嵌套的网格都成为一个网格。 一旦它们成为网格，我们就必须声明列和行并将其子级放置在新Grid上，而不是在外部声明的Grid上。

So on ag2 I first position ag2 itself, then make it a grid and declare the columns and rows.

因此，在ag2上，我首先将ag2本身定位，然后使其成为网格并声明列和行。

I’m using the same fraction units here as for the outer but as these are fraction units they are not the same width as the outer as they take their percentage width from their grid container.

我在这里使用与外部相同的分数单位，但是由于这些是分数单位，因此它们与外部的宽度不同，因为它们从其网格容器中获取其百分比宽度。

This could be solved by the proposed subgrid keyword. This is currently marked as “at risk” in the editor’s draft of the Level 1 spec and may get punted to Level 2 due to the complexity of implementation. It’s therefore not part of the Blink implementation. If we had subgrid we would be able to declare ag2 as a subgrid.

这可以通过建议的subgrid关键字解决。 当前，在级别1规范的编辑草案中，这被标记为“有风险”，由于实现的复杂性，可能会被打到级别2。 因此，它不是Blink实现的一部分。 如果我们有子网格，我们将能够将ag2声明为子网格。

.ag2 {
  grid-column: col 3 / span gutter 6;
  grid-row: 2 / span 5;
  display: grid;
  grid: subgrid;
}.ag2 {
  grid-column: col 3 / span gutter 6;
  grid-row: 2 / span 5;
  display: grid;
  grid: subgrid;
} 

It would then inherit the grid from the parent, ensuring that elements maintained that strict grid.

然后它将从父级继承网格，确保元素保持该严格的网格。

You can see the problem clearly once we have positioned the nested ag7 in the completed example below. The much smaller container meaning our gutter looks far too wide in proportion.

在下面完成的示例中将嵌套的ag7定位后，您可以清楚地看到问题。 较小的容器意味着我们的装订线比例看起来太宽。

There are ways round this, using absolute units for example for gutters, however I’d definitely like to see the implementation of subgrid, it would make using grids far more natural and simple for authors. Although like many things making something simple takes a lot of work!

有多种方法可以解决此问题，例如使用绝对单位作为装订线，但是我绝对希望看到subgrid的实现，这将使作者使用网格更加自然和简单。 尽管像许多事情一样，使某些事情变得简单也需要大量工作！

完成的例子 (The completed example)

Other than the subgrid issue, creating this grid just works. We end up with a layout that looks like this.

除了子网格问题之外，创建此网格也可以。 我们最终得到一个看起来像这样的布局。

You can see the worked example here, using Chrome with the experimental web platform features flag enabled.

您可以在此处使用启用了实验性网络平台功能标志的Chrome浏览器查看工作示例 。

There is no complex maths to do, working out your position on the grid can be a little tricky but that is something good tooling could really help with. I would have thought it possible to create a browser plugin, or just some JavaScript to use in development that could overlay a grid with line numbering based on what was declared in the column and rows definition. The important thing is that this is all native CSS, with no reliance on preprocessors, and with no need for clearing, or the layout hacks we currently have to use.

没有复杂的数学可做，要确定自己在网格上的位置可能会有些棘手，但这是好的工具真正可以帮助的。 我本以为可以创建一个浏览器插件，也可以创建一些JavaScript以用于开发中，这些JavaScript可以基于列和行定义中声明的内容用行号覆盖网格。 重要的是，这全部是本机CSS ，无需依赖预处理程序，也无需清除，也无需使用当前需要使用的布局技巧。

It’s worth noting that I fixed the height of the rows to match the original example. With Grid it’s trivial to have full height columns. For example if I want those sidebars to be full height, I just set them to span 5 rows of the grid.

值得注意的是，我固定了行的高度以匹配原始示例。 使用Grid时，拥有全高列很简单。 例如，如果我希望这些侧边栏为全高，则只需将它们设置为跨越网格的5行即可。

This is not so easy to do with existing layout methods.

使用现有的布局方法并非易事。

If you want to know more and see my other examples check out Grid by Example. I also spoke on this subject for CSS Conf EU last year, and that talk introduces the basic Grid concepts.

如果您想了解更多并看到我的其他示例，请查看Grid by Example 。 去年，我在CSS Conf EU上也谈到了这一主题，该演讲介绍了基本的Grid概念。

I’ll be presenting on Grid Layout at various conferences this year with an updated talk – coming up is Fluent, and An Event Apart Boston. I’m also leading a workshop on CSS Layout Modules for Future Insights Live in Las Vegas.

我将在今年的各种会议上针对Grid Layout进行演讲，并进行更新后的演讲–即将是Fluent和一个Event Apart Boston 。 我还领导了一个关于在拉斯维加斯举行的Future Future Insights CSS布局模块的研讨会。

翻译自: https://rachelandrew.co.uk/archives/2015/02/04/css-grid-layout-creating-complex-grids/

css 网格布局