中英文模式阅读
中文模式阅读
英文模式阅读

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,
Spec有点技术性,但它是迄今为止我读过的最受欢迎的规格。如果你是一个更高级的开发人员,bookmarkit for future references.
它将来的参考。

So, will this be helpful? {#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 {#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. The CSS Grid is declarative {#1-the-css-grid-is-declarative}

Declarative APIs are so sweet to work with. Think
声明性API非常适合使用。认为ReactJS?

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今天要解决的问题。 From the spec.
从规格。

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 Grid消除了制作智能布局的痛苦过程,并用一套漂亮的声明规则替换它,使得该过程几乎毫不费力。

These are good times in the history of CSS.
这是CSS历史上的美好时光。

2. The fractional unit does not always produce equally spaced rows and columns {#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
每个人都学习并喜欢CSS Grid的第一件事就是fractional unit. Even a duck can get away with it.
。即使是鸭子也可以逃脱它。

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:
期望为您提供相等间距的列或行。见下图: Equally spaced columns created by the fractional unit.
由分数单位创建的等间距列。

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.
单位填充可用空间但不小于网格容器的最小大小或行或列的内容。

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.
声明,您可以使用小数单位获得意外结果。

After quacking around like a wet scared duck, I spent a lot of time experimenting with the fractional unit. I wrote an
像湿鸭子一样嘎嘎叫之后,我花了很多时间试验分数单位。我写了一篇article on my findings.
我的发现。

3. You don't really know how Grids are sized. Or, do you? {#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:
定义。像这样的东西:

grid-template-rows: 10px 1fr 3fr
grid-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

Once 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.

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?
。然后在该区域内调整网格项目的大小。那么,如果没有计算出轨道的大小,网格项目到底是多少?

If you take a look at the
如果你看一下Placing Grid items 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:
调整网格可以基于以下内容:

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. By default, grid items are stretched to fit their grid area --- except in certain cases {#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:
分配给特定的网格区域,如下所示:

.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%

They will automatically stretch to fill their respective areas.
它们将自动伸展以填充各自的区域。

Now, here's the catch.
现在,这是抓住了。

This behavior is inconsistent with Images.
此行为与图像不一致。

In Example 8, Section 3.3, the spec says "By default, grid items are stretched to fit their grid area"
在示例8,第3.3节中,规范说"默认情况下,网格项被拉伸以适合其网格区域"

While this is true for `divs` and the likes, this behavior is inconsistent w/ images i.e images as direct children (grid items)
虽然这对于`divs`和喜欢这是正确的,但这种行为与图像不一致,即图像作为直接子项(网格项)

Is this something worth looking at? ?
这值得关注吗? ?pic.twitter.com/EI9s2wAEhl

--- Ohans Emmanuel (@OhansEmmanuel)
--- Ohans Emmanuel(@OhansEmmanuel)December 5, 2017

As pointed out by
正如所指出的那样Rachel Andrew, the
spec goes on to say this behavior is different for grid items with an
继续说这个行为是不同的网格项目与intrinsic aspect ratio.

Don't let the big words scare you. It ain't no demogorgon.
不要让大词吓到你。这不是没有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.
宽的,或任何给定的尺寸。

But, regular block elements such as
但是,常规块元素如divs , have no intrinsic dimensions. That is, they do not have dimensions that naturally belong to them.
,没有内在的维度。也就是说,它们没有自然属于它们的尺寸。

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. Do you really know what a Grid Item is? {#5-do-you-really-know-what-a-grid-item-is}

Consider the code block below:
考虑下面的代码块:

<div style="display: grid">
    <div>block</div>

    <div>float</div>
   
    I am a random Text 

    <span>
        item 4
    </span>
</div>

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.
标签。 which is it?
这是什么?

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.
也是一个网格项。

<div style="display: grid">
    
<div>block</div>

    <div>float</div>
    <!-- the text below is a grid item -->
    I am a random Text 

    <span>
        item 4
    </span>
</div>

Yeah, the answer is 4. We've got 3 explicit grid items and 1 anonymous grid item!
是的,答案是4.我们有3个显式网格项和1个匿名网格项!

Got that?
知道了?

6. The margins of adjacent grid items do not collapse. {#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.
有很多根本的区别。

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 items are placed within their respective grid areas. They stay in their own undisturbed territories. They are unaffected by collapsible margins. How cool.
网格项目放置在各自的网格区域内。他们留在自己不受干扰的地区。它们不受可折叠边缘的影响。挺酷的。

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
如果你很好奇块元素和网格元素之间存在其他差异,我写了一篇有趣的文章article on the subject.
就此主题而言。

7. auto-fill and 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.
看起来像它们在某种程度上不同的功能。

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
例如,以下代码将创建尽可能多的代码200pxcolumns as will fit into the window width. If there is any remaining space, it will be distributed among the
列适合窗口宽度。如果有剩余空间,它将分配给200px columns.
列。

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.
不会这样做。它会将空轨道收缩到零。

That's all.
就这样。

8. In the grid-template-areas definition, the number of words in a string MUST be equal. {#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?
看起来像地图的值?

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.
声明,所有字符串必须具有相同的列数,否则声明无效。

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. Avoid using percentages in paddings or margins on grid items entirely {#9-avoid-using-percentages-in-paddings-or-margins-on-grid-items-entirely}


From the CSS Grid Spec

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
利润率widthwhile
top/
/bottom are resolved against the
解决了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. How's the size of the explicit grid resolved when there's a conflict? {#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.

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.
胜。

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
property用于将网格项放在网格上。那么,我们为什么要在网格定义中出现冲突呢?不应该只使用网格来定义网格grid-template-columns and
grid-template-rows properties? I answer this in the comment section. Check it out.
属性?我在评论部分回答这个问题。看看这个。

11. The size of the grid is not purely the sum of the track sizes {#11-the-size-of-the-grid-is-not-purely-the-sum-of-the-track-sizes}


Grid tracks refer to the distance between grid lines.
网格轨迹指的是网格线之间的距离。

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
网格的大小可能会受到影响grid-row-gap,
grid-column-gap and
justify-content,
align-content . Which sadly, can add additional space between tracks too.
。遗憾的是,也可以在曲目之间增加额外的空间。

So, be careful while computing fixed widths within the grid.
因此,在计算网格内的固定宽度时要小心。

BONUS: We can all contribute to making the DOCS better {#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.
在阅读规范时,我发现了一个小错字。

@ireaderinokun who is responsible for fixing typos in the css grid spec? I may have spotted one
谁负责修复css网格规范中的拼写错误?我可能已经发现了一个pic.twitter.com/6ybI5Bx1Ok --- Ohans Emmanuel (@OhansEmmanuel)
--- Ohans Emmanuel(@OhansEmmanuel)July 13, 2017

At the time, I wasn't particularly sure what to do. So, I asked around on Twitter.
那时,我不是特别肯定该怎么做。所以,我在Twitter上问过。

The kind
那种Jen Simmons 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? {#want-to-become-pro}

Download my free CSS Grid guide, and also get two quality interactive Flexbox courses for free!
下载我的免费CSS网格指南,并免费获得两个高质量的互动Flexbox课程! How to Master the CSS Grid, and what to build along the way (Free PDF Guide)
如何掌握CSS网格,以及沿途构建的内容(免费PDF指南)

Get them now ?

中英文模式阅读
中文模式阅读
英文模式阅读

查看英文原文

查看更多文章

公众号:银河系1号
公众号:银河系1号

联系邮箱:public@space-explore.com
联系邮箱:public@space-explore.com

(未经同意,请勿转载)
(未经同意,请勿转载)