css网格

June 11, 2017, I decided to read the CSS Grid spec.

2017年6月11日，我决定阅读CSS Grid规范。

The Spec was a little bit technical, but it was by far the most enjoyed specification I had ever read. If you’re a more advanced developer, it for future references.

该规范有点技术性，但是它是迄今为止我阅读过的最喜欢的规范。 如果您是高级开发人员，请将其添加为 ，以备将来参考。

那么，这会有所帮助吗？ (So, will this be helpful?)

I believe the difference between good and great engineers, is that the latter take their time to understand what really goes on under the hood. They learn how things work, instead of learning by “copy and paste.”

我相信优秀的工程师与优秀的工程师之间的区别在于，后者会花一些时间来了解真正的内幕。 他们学习事物的工作方式，而不是通过“复制粘贴”来学习。

So, do you want to be a great developer?

那么，您想成为一名出色的开发人员吗？

Hell, yeah. Or, you wouldn’t be reading this article.

地狱，是的。 或者，您不会阅读本文。

您将学到什么 (What you’ll learn)

While reading the spec, I learned some very subtle, but profound details.

在阅读规范时，我了解了一些非常微妙但深刻的细节。

In this article, I will share them with you.

在本文中，我将与您分享。

1. CSS网格是声明性的 (1. The CSS Grid is declarative)

Declarative APIs are so sweet to work with. Think ?

声明式API非常好用。 觉得吗？

As websites evolved from simple documents into complex, interactive applications, web layouts became difficult to compose. So difficult, they were my nightmare.

随着网站从简单的文档发展成为复杂的交互式应用程序，Web布局变得难以编写。 如此艰难，这是我的噩梦。

This is exactly the problem CSS Grid has come to solve today.

这正是CSS Grid今天要解决的问题。

The CSS Grid takes away the painful process of crafting intelligent layouts and replaces it with a beautiful set of declarative rules that make the process near effortless.

CSS网格消除了制作智能布局的痛苦过程，并用一组漂亮的声明性规则代替了它，使该过程变得毫不费力。

These are good times in the history of CSS.

这是CSS历史上的美好时光。

2.分数单位并不总是产生等距的行和列 (2. The fractional unit does not always produce equally spaced rows and columns)

One of the first things everyone learns and gets to love about the CSS Grid is the . Even a duck can get away with it.

每个人对CSS网格学习并喜欢的第一件事就是 。 甚至鸭子也可以摆脱它。

The fractional unit takes away the pain of calculating percentages. It is a delight to work with.

分数单位消除了计算百分比的麻烦。 很高兴与之合作。

Most people teach that the fractional unit (fr) yields equally spaced columns or rows.

大多数人认为分数单位(fr)会产生等距的列或行。

For example, a declaration like 1fr 1fr 1fr is expected to give you columns or rows of equal spacing. See the illustration below:

例如，像1fr 1fr 1fr这样的声明应为您提供相等间距的列或行。 请参见下图：

Sadly, this is NOT always true. Poor duck.

可悲的是，这并不总是正确的。 可怜的鸭子。

The following is from the spec:

以下是规格说明：

The fr unit fills up the available space BUT it is NEVER smaller than the minimum size of the grid container or the content of the row or column.

fr单位会填充可用空间，但它永远不会小于网格容器的最小大小或行或列的内容。

Essentially, If you have an image, img or any grid item, with a min-width or min-height declaration, you can have unexpected results with the fractional unit.

本质上，如果您有图像， img或任何网格项目，且声明min-width为min-width或min-height ，则分数单位可能会产生意外结果。

After quacking around like a wet scared duck, I spent a lot of time experimenting with the fractional unit. I wrote an on my findings.

像湿scar的鸭子一样嘎嘎叫卖后，我花了很多时间尝试小数部分。 我写了关于我的发现的 。

3.您真的不知道网格的大小。 还是，你呢？ (3. You don’t really know how Grids are sized. Or, do you?)

A CSS grid definition always begins in the lines of this:

CSS网格定义始终从以下行开始：

display: grid

Often times, it is followed by the row and column definitions. Something like this:

通常，它后面是row和column定义。 像这样：

grid-template-rows: 10px 1fr 3frgrid-template-columns: 1fr

And finally, you are likely to place the grid items with whatever technique suits you.

最后，您可能会使用适合您的任何技术来放置网格项。

Since there are lots of ways to place grid items, I’ll skip the required code for brevity.

由于有很多放置网格项目的方法，为简洁起见，我将跳过所需的代码。

So, here’s the problem.

所以，这就是问题所在。

Under the hood, you must assume that the size of the grid rows and columns are first computed before the items are placed. Right?

在后台，您必须假定在放置项目之前首先计算网格的行和列的大小。 对？

Well, it appears that the truth is the complete opposite.

好吧，事实似乎是完全相反的。

How weird.

真奇怪

The following is from the spec:

以下是规格说明：

2.3. Sizing the Grid

2.3。 调整网格大小

2.3. Sizing the Grid

2.3。 调整网格大小

2.3. Sizing the GridOnce the grid items have been placed, the sizes of the grid tracks (rows and columns) are calculated, accounting for the sizes of their contents and/or available space as specified in the grid definition.

2.3。 调整网格 大小 放置网格项后 ，将计算网格轨迹(行和列)的大小，并考虑网格内容的大小和/或网格定义中指定的可用空间。

Note the progression.

注意进度。

1. The grid items are placed.
   放置网格项目。
2. The sizes of the grid tracks are calculated
   计算网格轨迹的大小

You’re likely to have questions around this. So, I’ll try to resolve those concerns of yours.

您可能对此有疑问。 因此，我将尝试解决您的那些担忧。

Firstly, note that every grid item is assigned a grid-area . The grid items are then sized within this area. So, how exactly are the grid items placed without already calculating the size of the tracks?

首先，请注意，每个网格项目都分配有一个grid-area 。 然后在此区域内调整网格项目的大小。 那么，在没有计算轨迹大小的情况下如何精确放置网格项目呢？

If you take a look at the section of the spec, you’ll find a clue.

如果您查看规范的“ 部分，将会找到线索。

A lot is taken into consideration when sizing grids, and that largely includes the size of the grid items.

调整网格大小时要考虑很多因素，其中很大一部分包括网格项目的大小。

Sizing grids may be based on the following:

调整网格的大小可能基于以下内容：

• A fixed sizing function ( or resolveable ).

  固定的大小调整功能( 或可解决的 )。

• An intrinsic sizing function (, , , ), or

  固有的大小调整函数( ， ， ， )或

• A flexible sizing function ().

  灵活的上浆功能( )。

What I believe happens under the hood is, the grid items are placed.

我相信发生在幕后的是放置网格项。

That is, the containing block for the item is determined, the sizing function for the item is then determined. This in turn influences the size of the grid tracks.

即，确定项目的包含块，然后确定项目的大小调整功能。 反过来，这会影响网格轨迹的大小。

You see?

你看？

Not what you initially thought.

不是你最初的想法。

4.默认情况下，网格项目会拉伸以适合其网格区域-在某些情况下除外 (4. By default, grid items are stretched to fit their grid area — except in certain cases)

Without your intervention, grid items will always stretch to fit their grid area.

无需您的干预，网格项目将始终可以拉伸以适合其网格区域。

So, if you had a declaration like so:

因此，如果您有这样的声明：

grid-template-areas: 'header header header'                     'sidebar main  main'                     'sidebar footer footer'

And you had divs assigned to the specific grid areas, like so:

并且已将divs分配给特定的网格区域，如下所示：

.div1 {   grid-area: header}.div2 {   grid-area: sidebar}.div3 {   grid-area: main}.div4 {   grid-area: footer}

You don’t need to declare the width and height of the divs above to 100%

您无需将divs的width和height声明为100%

They will automatically stretch to fill their respective areas.

它们将自动拉伸以填充各自的区域。

Now, here’s the catch.

现在，这是要抓住的地方。

This behavior is inconsistent with Images.

此行为与图像不一致。

As pointed out by , the goes on to say this behavior is different for grid items with an intrinsic aspect ratio.

正如所指出的，该继续说，这种行为对于具有intrinsic aspect ratio网格项目是不同的。

Don’t let the big words scare you. It ain’t no demogorgon.

不要让那些大话吓到你。 这不是没有女巫。

An image is by default an inline-block element, but they also have specific dimensions. They have dimensions naturally associated with them. An image could be 400px by 600px wide, or any given dimensions at all.

图像默认情况下是一个inline-block元素，但它们也具有特定的尺寸。 它们具有与之自然相关的尺寸。 图片可以是400px x 600px宽，也可以是任何给定的尺寸。

But, regular block elements such as divs , have no intrinsic dimensions. That is, they do not have dimensions that naturally belong to them.

但是，常规块元素(例如divs )没有固有尺寸。 也就是说，它们没有自然属于它们的尺寸。

So, while grid items with NO intrinsic dimensions will stretch to fit their grid area, this is not true for grid items having an intrinsic dimension e.g images.

因此，虽然没有固有尺寸的网格项目将拉伸以适合其网格区域，但对于具有固有尺寸的网格项目(例如图像)而言，情况并非如此。

5.您真的知道网格项目是什么吗？ (5. Do you really know what a Grid Item is?)

Consider the code block below:

考虑下面的代码块：

    
    
     
      block
     
    
     
      float
     
       I am a random Text     
             item 4    
    

In the code block above, can you spot the grid items?

在上面的代码块中，您可以发现网格项目吗？

How many grid items are in the code block, 3 or 4?

代码块中有3个或4个网格项？

I failed this question blatantly.

我公然地失败了这个问题。

Note that the text I am a random text isn’t wrapped by any html tags.

请注意， I am a random text不会被任何html标签包裹。

So, what’s your answer?

那么，你的答案是什么？

Well, if you answered 3, you’re wrong. Haha, got ya!

好吧，如果您回答3，那就错了。 哈哈，知道了！

According to the spec, an anonymous grid item is wrapped around each run of text within a grid.

根据规范， 匿名网格项目围绕网格中的每个文本行包装。

Yes, that means I am a random text is also a grid item.

是的，这意味着I am a random text ，也是一个网格项。

    
    
     
      block
     
    
     
      float
     
    
         I am a random Text     
             item 4    
    

Yeah, the answer is 4. We’ve got 3 explicit grid items and 1 anonymous grid item!

是的，答案是4。我们有3个显式网格项和1个匿名网格项！

Got that?

了解？

6.相邻网格项目的边距不会折叠。 (6. The margins of adjacent grid items do not collapse.)

There are big differences between block elements and grid containers.

块元素和网格容器之间存在很大差异。

What I mean is, an element with display: block and another with display: grid have a lot of fundamental differences.

我的意思是，一个带有display: block的元素和另一个带有display: grid的元素有很多基本差异。

The difference I am choosing to discuss here is got to do with collapsible margins.

我选择在这里讨论的差异与可折叠的边距有关。

One of first things you learn with CSS is the concept of collapsible margins. I don’t want to spend a lot of time explaining what collapsible margins mean. If you bring it up in the comments, I will.

使用CSS学习的第一件事是可折叠边距的概念。 我不想花很多时间来解释可折叠利润率的含义。 如果您在评论中提出，我会的。

So, back to grids.

因此，回到网格。

With every grid item, the margins are never collapsed.

对于每个网格项目，边距都不会崩溃。

Well, this is understandable. Let me show you why.

好吧，这是可以理解的。 让我告诉你为什么。

Adjacent grid items are independently contained within the containing block formed by their grid areas.

相邻的网格项目被独立地包含在由其网格区域形成的容纳块内。

What that complex paragraph above means is this. Each grid item lives and breathes within a grid-area

上面那个复杂的段落意味着什么。 每个网格项目在grid-area生活和呼吸

So, technically, you may say the grid item isn’t an immediate neighbor of the other grid items. But is contained within an uninterrupted closed territory — the grid area.

因此，从技术上讲，您可能会说该网格项目不是其他网格项目的直接邻居。 但是包含在不间断的封闭区域内-网格区域。

If you’re curious what other differences exist between block elements and grid elements, I wrote an interesting on the subject.

如果您想知道块元素和网格元素之间还存在其他区别，我就此发表了有趣的 。

7. auto-fill和auto-fit. What's the difference? auto-fit. What's the difference? (7. auto-fill and auto-fit. What's the difference?)

While auto-fill and auto-fit look like the same functions they are different in a way.

尽管auto-fill和auto-fit看起来像相同的功能，但是它们在某种程度上有所不同。

They are similar in the sense that they allow for automatically creating grid tracks that fill up the grid container in some way.

它们在某种意义上类似，因为它们允许自动创建以某种方式填充网格容器的网格轨迹。

For example, the following code will create as many 200px columns as will fit into the window width. If there is any remaining space, it will be distributed among the 200px columns.

例如，以下代码将创建适合窗口宽度的200px列。 如果有剩余空间，它将在200px列之间分配。

body {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));}

What’s the difference?

有什么不同？

auto-fill will create tracks even if there's no grid item to fill it up. auto-fit will not do this. It will deflate empty tracks to zero.

即使没有网格项目可以填充， auto-fill也会创建轨道。 auto-fit不会执行此操作。 它将空轨道缩小为零。

That's all.

就这样。

8.在网格模板区域定义中，字符串中的单词数必须相等。 (8. In the grid-template-areas definition, the number of words in a string MUST be equal.)

You remember the weird looking grid-template-areas values that look like a map?

您还记得看起来像地图的看起来怪异的grid-template-areas值吗？

Well, it appears it can mess things up real quick.

好吧，看来它可以很快使事情变得混乱。

In a grid-template-areas declaration, all strings must have the same number of columns, or else the declaration is invalid.

在grid-template-areas声明中，所有字符串必须具有相同的列数，否则声明无效。

For example:

例如：

/* this is valid */grid-template-areas: "header header header sidebar"                     "main   main   main   sidebar"                     "main   main   main   sidebar"/* this is WRONG */grid-template-areas: "header header header sidebar"                     "main   main   main   sidebar"                     "main   main     sidebar"

The number of word in the strings, must be equal.

字符串中的单词数必须相等。

9.避免完全在网格项目的填充或边距中使用百分比 (9. Avoid using percentages in paddings or margins on grid items entirely)

The reason behind this is simple. At the time of this writing, you will get different behavior in different browsers.

这背后的原因很简单。 在撰写本文时，您将在不同的浏览器中得到不同的行为。

According to the spec, the percentage may be resolved either against the width of the element alone, or left/right margins against the width while top/bottom are resolved against the height

根据规范，该百分比可以或者针对解决width的元件的单独，或left / right对边缘width而top / bottom的反对解决height

In order to have a consistent rendering across most browsers, avoid using percentages in paddings or margins of grid items.

为了在大多数浏览器中具有一致的呈现效果，请避免在网格项目的填充或边距中使用百分比。

More importantly, there are already a few confusing bits with the CSS Grid. Don’t shoot yourself in the foot with percentages paddings or margins in grid items.

更重要的是，CSS Grid已经有一些令人困惑的地方。 不要在网格项目中使用百分比填充或边距来射击自己。

10.发生冲突时，如何解决显式网格的大小？ (10. How’s the size of the explicit grid resolved when there’s a conflict?)

Assume that you have a grid declaration like so:

假设您有一个如下的网格声明：

grid-template-areas: "header header header sidebar"                     "main   main   main   sidebar"                     "main   main   main   sidebar"

In the code block above, you have 4 columns and 3 rows.

在上面的代码块中，您有4列和3行。

What if you also did this:

如果您也这样做：

grid-template-columns: repeat(5, 1fr) grid-template-rows: repeat(4, 1fr)

Now you have more columns and rows. 5 columns, and 4 rows.

现在，您有更多的列和行。 5列4行。

You got that?

你明白了吗？

There’s now a conflict in the declarations. So, how is this resolved?

声明中现在有冲突。 那么，如何解决呢？

According to the spec, the size of the explicit grid is determined by the larger of the number of rows/columns defined by grid-template-areas and the number of rows/columns sized by grid-template-rows/grid-template-columns.

根据规范，显式网格的大小取决于由grid-template-areas定义的rows/columns数和由grid-template-rows/grid-template-columns决定的rows/columns数中的较大者。

The spec may seem like it complicated a simple thing. In plain language, what that means is, the declaration with the larger number of rows or columns wins.

规范似乎使一件简单的事情变得复杂。 用通俗易懂的语言，这意味着，具有更多rows或columns的声明将获胜。

In the example above, the grid will take up 5 columns, and 4 rows NOT 4 columns and 3 rows.

在上面的示例中，网格将占用5列和4行，而不是4列和3行。

*EDIT: The grid-template-areas property is used to place grid items on a grid. So, why should we have a conflict in grid definition? Aren’t grids supposed to be defined with just the grid-template-columns and grid-template-rows properties? I answer this in the comment section. Check it out.

*编辑： grid-template-areas属性用于将网格项放置在网格上。 那么，为什么我们在网格定义上会有冲突呢？ 难道不应该仅使用grid-template-columns和grid-template-rows属性定义grid-template-columns吗？ 我在评论部分对此进行回答。 看看这个。

11.网格的大小不只是轨道大小的总和 (11. The size of the grid is not purely the sum of the track sizes)

While this is simple, it is worth mentioning incase you have a fixed width grid set up.

虽然这很简单，但值得一提的是您设置了固定宽度的网格。

The size of the grid may be influenced by the , and , . Which sadly, can add additional space between tracks too.

网格的大小可能受 ， 和 ， 。 可悲的是，它们也可以在轨道之间添加额外的空间。

So, be careful while computing fixed widths within the grid.

因此，在计算网格内的固定宽度时要小心。

奖金：我们都可以为使DOCS更好做出贡献 (BONUS: We can all contribute to making the DOCS better)

Because I’m a kind soul, I’ve added one more tip here ?

因为我是一个善良的灵魂，所以我在这里又添加了一个提示？

The Spec was written by humans. And it so happens that humans can make mistakes.

该规范是由人类编写的。 碰巧的是，人类会犯错误。

While reading the spec, I spotted a tiny typo.

在阅读规格时，我发现了一个很小的错字。

At the time, I wasn’t particularly sure what to do. So, I asked around on Twitter.

当时，我不确定该怎么做。 因此，我在Twitter上四处询问。

The kind helped file an issue on github, and it got fixed.

的这种帮助在github上提出了一个问题，该问题已得到解决。

So, what’s the moral?

那么，道德是什么？

You can help make the docs better by contributing in whatever way possible.

您可以通过任何可能的方式来帮助使文档更好。

Yes, you!

是的，就是你！

Let’s make the web better, together.

让我们一起改善网络。

想成为专业人士吗？ (Want to become Pro?)

Download my free CSS Grid guide, and also get two quality interactive Flexbox courses for free!

下载我的免费CSS Grid指南，并免费获得两本高质量的交互式Flexbox课程！

?

？

翻译自:

css网格