css 网格布局_CSS网格布局：掌握Chrome实施

css 网格布局

I’ve been following the CSS3 Grid Layout specification since the early days, writing about the IE10 implementation in my book CSS3 Layout Modules and for 24 Ways. When I last wrote an update here everything was theoretical, as there was no browser implementation at the time. Now, with support for the latest version of the spec in Chrome, I thought it a good time to revisit how my favourite CSS module is getting along.

从早期开始，我就一直在遵循CSS3 Grid Layout规范，在我的CSS3 Layout Modules和24 Ways一书中介绍了IE10的实现。 我上次写更新时，所有内容都是理论上的，因为当时没有浏览器实现。 现在，有了对Chrome规范最新版本的支持，我认为现在是重新审视我最喜欢的CSS模块如何相处的好时机。

This material was created for my talk at Responsive Day Out, here are the resources and slides for that presentation.

该材料是为我在“响应之日”上的演讲而创建的， 以下是该演示文稿的资源和幻灯片 。

如何玩网格 (How to play with Grid)

To play with Grid in a browser you need to enable Experimental Web Platform Features in Chrome. You will then be able to use Grid, you don’t need to prefix any properties or values. A couple of these examples only work right now in Chrome Canary.

要在浏览器中使用网格，您需要在Chrome中启用“实验性Web平台功能” 。 然后，您将能够使用Grid，而无需在任何属性或值之前添加前缀。 其中一些示例仅在Chrome Canary中才有效。

声明网格 (Declaring a Grid)

To declare a Grid on an element, you need to use a new value for the display property, display: grid. Any elements inside that parent will now stack up visually.

要在元素上声明Grid，需要为display属性使用新值display：grid。 该父级内部的任何元素现在都将在视觉上堆叠。

.wrapper {
  display: grid;
}.wrapper {
  display: grid;
} 

The first step is to declare what your Grid looks like. This can be anything from a simple three column layout to a complex 16 column grid structure. The following will create a simple grid of three main columns and two gutter columns. A bit like an old school liquid layout.

第一步是声明网格的外观。 从简单的三列布局到复杂的16列网格结构，它可以是任何东西。 下面将创建一个由三个主要列和两个装订线列组成的简单网格。 有点像老式的液体布局。

If you look at your page now, you’ll find everything stacked up in the first 200 pixel wide column. This is because without any Grid Positioning applied to the child elements of .wrapper they default to the top left cell of the grid.

如果现在查看您的页面，您会发现所有内容都堆积在前200像素宽的列中。 这是因为没有将任何网格定位应用于.wrapper的子元素，它们默认为网格的左上角单元格。

We can then start positioning our items onto our Grid.

然后，我们可以开始将项目放置到网格上。

I am using line-based positioning here. A crucial thing to bear in mind when working with Grid is that you need to target lines, not columns. So when positioning the main content I use:

我在这里使用基于行的定位。 使用Grid时要牢记的关键是，您需要定位行而不是列。 因此，在定位主要内容时，我使用：

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

This could also be written in a shorthand format using the grid-row and grid-column properties:

也可以使用grid-row和grid-column属性以简写形式编写：

You can see this example over on CodePen – remember you will need to use Chrome to see the Grid in action.

您可以在CodePen上看到该示例-记住，您将需要使用Chrome来查看运行中的Grid。

Simple Layout with Grid – line-based placement

带有网格的简单布局–基于行的放置

I have also created an example using Media Queries to redefine the layout at different breakpoints.

我还创建了一个使用Media Queries的示例，以在不同的断点处重新定义布局。

Responsive Layout with Grid – line-based placement

网格响应式布局–基于行的放置

网格模板区域 (Grid Template Areas)

If battling with all of these lines gets confusing, there is a simpler way to set up and then target parts of your Grid. When you define your Grid you can also provide names for the main content areas, using the grid-template-areas property.

如果与所有这些行的斗争变得令人困惑，则可以使用一种更简单的方法来设置并定位网格的各个部分。 定义网格时，还可以使用grid-template-areas属性为主要内容区域提供名称。

.mainnav {
  grid-area: nav;
}
.subhead {
  grid-area: subhead;
}
.quote {
  grid-area: quote;
}
.content {
  grid-area: content;
}
.feature-image {
  grid-area: feature;
}.mainnav {
  grid-area: nav;
}
.subhead {
  grid-area: subhead;
}
.quote {
  grid-area: quote;
}
.content {
  grid-area: content;
}
.feature-image {
  grid-area: feature;
} 

Placing an item into an area is then as simple as assigning the name of the area it should be placed into.

这样，将一个项目放到一个区域中就像分配要放置的区域名称一样简单。

If you take a look at the code for this example, I am creating a simple responsive design by first setting up my named areas outside of the media queries. Inside my Media Queries I then redefine the grid, setting the location of each element.

如果您看一下此示例的代码 ，我将通过首先在媒体查询之外设置我的命名区域来创建一个简单的响应式设计。 然后，在我的媒体查询中，重新定义网格，设置每个元素的位置。

This example highlights the thing about Grid that really got me excited when I first looked at the spec. Grid allows us to properly separate source order from layout. The big feature image and the quote in this example are found in the source below the content. However I can pop them anywhere on the Grid at different layout widths. This means that we can start to work out what is best to sit where at different screen sizes and for different devices and display the content visually in that order – while keeping it in a sensible structure in the source.

此示例突出显示了有关Grid的事情，当我初次查看该规范时，确实让我兴奋。 网格使我们能够正确地将源顺序与布局分开。 此示例中的大功能图片和引号位于内容下方的源代码中。 但是，我可以将它们以不同的布局宽度弹出到Grid的任何位置。 这意味着我们可以开始确定在不同屏幕尺寸和不同设备上的最佳坐姿，并以该顺序直观显示内容-同时将其保持在源代码的合理结构中。

一个16列的布局示例并命名为Grid Lines (A 16 column layout example and named Grid Lines)

You can also assign names to lines. This becomes useful if you want to create a formal grid to position elements onto. Here I am declaring a Grid with 16 columns – the line before the column is named “col”, the line before the gutter is named “gutter” (remember: name lines not columns).

您还可以为行指定名称。 如果您想创建一个正式的网格来放置元素，这将很有用。 在这里，我声明一个具有16列的网格-该列之前的行命名为“ col”，装订线之前的行命名为“ gutter”（请记住：名称行不是列）。

.wrapper {	 
  display:grid;
  grid-template-columns: (gutter) 1fr repeat(16, (col) 4.25fr (gutter) 1fr );
  grid-template-rows: repeat(9, (row) auto (gutter) 20px );
}.wrapper {	 
  display:grid;
  grid-template-columns: (gutter) 1fr repeat(16, (col) 4.25fr (gutter) 1fr );
  grid-template-rows: repeat(9, (row) auto (gutter) 20px );
} 

I can then place items onto this grid using the span keyword to say how many col or gutter lines I should span. To create a full width header:

然后，我可以使用span关键字将项目放置到此网格上，以说出我应该跨越多少行或装订线。 要创建全角标题：

To position the content area:

放置内容区域：

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

To see and play with a couple of example take a look on CodePen at an example of positioning blocks onto that 16 column grid, and an example of positioning more realistic content onto the grid. As of today this example only works in Chrome Canary.

要查看并玩几个示例，请在CodePen上查看将块定位到16列网格上的示例，以及将更实际的内容定位到网格上的示例。 到目前为止，该示例仅适用于Chrome Canary。

• 16 column grid example
• Positioning a layout onto a 16 column grid

• 16列网格示例
• 将布局放置在16列网格上

If you are interested you can see a similar example using the initial IE10 syntax. I wrote about that early implementation in my piece for 24 Ways. Defining this kind of 16 column grid at that point required doing calculations to work out how to place the items and I find it interesting to see how the spec has evolved into something that really is quite simple to use – once you get your head round the basic concepts.

如果您有兴趣，可以使用初始IE10语法查看类似的示例。 我在《 24种方式》中写了关于早期实现的内容。 在那时定义这种16列网格需要进行计算以弄清楚如何放置物品，我发现有趣的是看到规格如何演变成一种真正非常容易使用的东西-一旦您掌握了基本概念。

If learning about Grid, and other newer CSS Layout Modules, is of interest to you take a look at my upcoming second edition of CSS Layout Modules – a little book of practical examples.

如果您对学习Grid和其他更新的CSS Layout Modules感兴趣，那么请看一下我即将出版的第二版CSS Layout Modules –一本实用示例书 。

翻译自: https://rachelandrew.co.uk/archives/2014/06/27/css-grid-layout-getting-to-grips-with-the-chrome-implementation/

css 网格布局