css grid_讲解CSS Grid

This really nice technique for creating a full width image inside a constrained column was being shared around recently. However, what it didn’t do was explain why this technique works. As part of my attempt to remove all the “it just works magic” from these techniques I thought I would explain.

最近， 这种在约束列内创建全宽图像的非常好技术被共享。 但是，它没有做的是解释为什么此技术有效。 作为我尝试从这些技术中删除所有“仅能发挥魔力”的尝试的一部分，我想我会解释。

I’ll write more about naming when I get to that part of my series explaining the Grid Spec, however understanding this technique requires the understanding of a few things about Grid.

当我进入解释网格规范的系列文章的那一部分时，我将写更多有关命名的知识，但是，要了解这种技术，就需要了解一些有关Grid的知识。

我们可以将物体相对于网格线定位 (We can position things against lines of the grid)

If you have used grid at all you are probably familiar with the concept of positioning items based on line numbers. We can achieve the breakout layout using this line-based placement of items. When we create a three column grid, as in the image below, we get 4 numbered lines. The breakout item is positioned from line 1 to line 4, the content from line 2 to 3. You can also see this in a CodePen.

如果您完全使用过网格，则可能熟悉基于行号定位项目的概念。 我们可以使用基于行的项目放置来实现突破布局。 当我们创建一个三列网格时，如下图所示，我们得到4条编号的行。 突破项目位于第1行到第4行，内容从第2行到3行。您也可以在CodePen中看到它。

However the example tutorial doesn’t use line numbers at all. It’s neater than that and doesn’t require that you understand what number lines on the grid are.

但是，示例教程完全不使用行号。 比这更整洁，并且不需要了解网格上的数字线。

您可以命名行 (You can name lines)

You need to know that you can name lines. In my next example the lines are named, I replace numbers with names to place items on the grid. Also demonstrated on CodePen.

您需要知道可以命名行。 在下一个示例中，行被命名，我用名称替换数字以将项目放置在网格上。 在CodePen上也进行了演示 。

Is this example, as with the referenced tutorial, I have named my lines *-start and *-end. This is important for the technique. Naming lines is optional as the article suggests, but the technique as described wouldn’t work without named lines.

与引用的教程一样，这个示例就是我的行名*-start和*-end 。 这对技术很重要。 正如文章所建议的那样，命名行是可选的，但是没有命名行，上述技术将无法使用。

When you name lines, you can optionally name them as *-start and *-end and this gives you a little more grid magic. We get a named grid area of the main name used. Sounds odd? Take a look at the diagram below, it shows 4 named grid lines, main-start and main-end both for columns and rows. The area marked out by the intersection of these lines can now be referenced by the name main. If we had named the lines foo-start and foo-end then we would have a named area called foo.

当给行命名时，可以选择将它们命名为*-start和*-end ，这给您带来了更多的网格魔力。 我们得到使用的主要名称的命名网格区域。 听起来很奇怪？ 看一下下面的图，它显示了4条命名的网格线，列和行的main-start和main-end。 这些线的交点标记的区域现在可以通过名称main引用。 如果我们将行命名为foo-start和foo-end那么我们将有一个名为foo的命名区域。

However this doesn’t get us to the technique used, which doesn’t used the named area, it is positioning against lines named ‘main’ and ‘full’ which are not defined anywhere.

但是，这并不能使我们了解所使用的技术，该技术没有使用命名区域，而是将其定位在未在任何地方定义的名为“ main”和“ full”的行上。

We have lines named main-start and main-end for our columns, therefore a named area called main. We also have lines named main that can be used for start due to the following note in the specification for line-placement:

我们的列有名为main-start和main-end的行，因此有一个名为main区域。 由于行放置规范中的以下注释，我们也有名为main行可用于开始：

“Note: Named grid areas automatically generate implicit named lines of this form, so specifying grid-row-start: foo will choose the start edge of that named grid area (unless another line named foo-start was explicitly specified before it).”

“注意：命名网格区域会自动生成这种形式的隐式命名线，因此指定grid-row-start：foo将选择该命名网格区域的起始边缘（除非在其之前明确指定了另一条名为foo-start的行）。”

This means that we can set grid-column-start to main and Grid will position that item at the start edge of the area that is named main due to us having named grid lines of main-start and main-end.

这意味着，我们可以设置grid-column-start到main和电网将在名为主要是由于我们具有命名的网格线区域的边缘开始该项目的定位main-start和main-end 。

What of the end line? In the tutorial the item is positioned with grid-column: main.

终点线是什么？ 在本教程中，该项目的位置为grid-column: main 。

The final piece of the puzzle is that if the start line is a named ident (which ours is) and the end line is missing, then the end line is set to the same named ident. In the specification for placement shorthands we can read:

难题的最后一部分是，如果起始行是一个命名的ident（我们就是这样），而缺少结束行，那么将结束行设置为相同的命名ident。 在放置速记规范中，我们可以阅读 ：

“[when using grid-row and grid-column shorthands] … When the second value is omitted, if the first value is a <custom-ident>, the grid-row-end/grid-column-end longhand is also set to that <custom-ident>; otherwise, it is set to auto.”

“ [[当使用grid-row和grid-column速记时……当省略第二个值时，如果第一个值是<custom-ident>，则grid-row-end / grid-column-end速记也设置为该<custom-ident>; 否则，它将设置为自动。”

This gives us a grid-column-end of main which will give us the end edge of the area called main thus our item stretches right across the grid covering all the column tracks between main-start and main-end.

这给了main一个grid-column-end ，它给了我们称为main的区域的末端边缘，因此我们的项目就在整个网格上延伸，覆盖了main-start和main-end之间的所有列轨迹。

You can see this in DevTools if you inspect the element grid-column-start and grid-column-end is main for the elements constrained by the column and full for elements constrained by the full width breakout. This is shown in the below screenshot of this CodePen of the completed example.

如果你检查元素可以在DevTools看到这个grid-column-start和grid-column-end是main由列和约束的元素full由全宽突破制约因素。 这在完整示例的此CodePen的以下屏幕截图中显示。

What this demonstrates is that when showing off a nice example it really is worth unpacking how the technique works. There is a lot to know about how line naming works, and by understanding it we can start to use this for more than just one technique.

这说明当展示一个很好的例子时，确实值得拆解该技术的工作原理。 关于行命名的工作原理，有很多要了解的知识，通过了解它，我们可以开始将其用于多种技术。