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


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


Spec有点技术性,但它是迄今为止我读过的最受欢迎的规格。如果你是一个更高级的开发人员,bookmark
它将来的参考。

So, will this be helpful? {#so-will-this-be-helpful}


我相信优秀工程师和优秀工程师之间的区别在于后者需要花时间去了解真正发生在幕后的事情。他们学习如何运作,而不是通过"复制和粘贴"来学习。


那么,你想成为一名出色的开发者吗?


见鬼,是的或者,你不会阅读这篇文章。

What you'll learn {#what-you-ll-learn}


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


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

1. The CSS Grid is declarative {#1-the-css-grid-is-declarative}


声明性API非常适合使用。认为ReactJS


随着网站从简单的文档演变为复杂的交互式应用程序,Web布局变得难以构建。这么难,他们是我的噩梦。


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


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


这是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}


每个人都学习并喜欢CSS Grid的第一件事就是fractional unit
。即使是鸭子也可以逃脱它。


分数单位消除了计算百分比的痛苦。与之合作是一种乐趣。


大多数人教导分数单位(fr)产生等间距的列或行。


例如,一个声明就像1fr 1fr 1fr
期望为您提供相等间距的列或行。见下图:
由分数单位创建的等间距列。


可悲的是,这并非总是如此。可怜的鸭子


以下是来自规范:


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


基本上,如果你有一个图像,img
或任何网格项目,带有min-width
要么min-height
声明,您可以使用小数单位获得意外结果。


像湿鸭子一样嘎嘎叫之后,我花了很多时间试验分数单位。我写了一篇article
我的发现。

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}


CSS网格定义始终以以下行开头:

display: grid

很多时候,它紧随其后row
column
定义。像这样的东西:

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

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


由于有很多方法可以放置网格项,因此我将跳过所需的代码以简洁起见。


所以,这就是问题所在。


在引擎盖下,您必须假设在放置项目之前首先计算网格行和列的大小。对?


嗯,事实似乎完全相反。


有多奇怪


以下是来自规范:

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.


注意进展。

  1. The grid items are placed.
  2. The sizes of the grid tracks are calculated

您可能对此有疑问。所以,我会尽力解决你的问题。


首先,请注意每个网格项都分配了一个grid-area
。然后在该区域内调整网格项目的大小。那么,如果没有计算出轨道的大小,网格项目到底是多少?


如果你看一下Placing Grid items
规范的一部分,你会发现一个线索。


在确定网格大小时会考虑很多因素,并且主要包括网格项的大小。


调整网格可以基于以下内容:


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


也就是说,确定项目的包含块,然后确定项目的大小调整功能。这又会影响网格轨道的大小。


你看?


不是你最初的想法。

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}


如果没有您的干预,网格项将始终拉伸以适应其网格区域。


所以,如果你有这样的声明:

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

你有divs
分配给特定的网格区域,如下所示:

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

你不需要声明width
height
divs
以上到100%


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


现在,这是抓住了。


此行为与图像不一致。


在示例8,第3.3节中,规范说"默认情况下,网格项被拉伸以适合其网格区域"


虽然这对于`divs`和喜欢这是正确的,但这种行为与图像不一致,即图像作为直接子项(网格项)


这值得关注吗? ?pic.twitter.com/EI9s2wAEhl


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


正如所指出的那样Rachel Andrew
spec
继续说这个行为是不同的网格项目与intrinsic aspect ratio


不要让大词吓到你。这不是没有demogorgon。


默认情况下,图像为inline-block
元素,但它们也有特定的尺寸。它们具有与它们自然相关的尺寸。图像可能是400px
通过600px
宽的,或任何给定的尺寸。


但是,常规块元素如divs
,没有内在的维度。也就是说,它们没有自然属于它们的尺寸。


因此,虽然没有固有尺寸的网格项目将拉伸以适合其网格区域,但对于具有固有尺寸(例如图像)的网格项目则不是这样。

5. Do you really know what a Grid Item is? {#5-do-you-really-know-what-a-grid-item-is}


考虑下面的代码块:

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

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

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

在上面的代码块中,您可以找到网格项吗?


代码块中有多少个网格项,3个或4个?


我公然失败了这个问题。


请注意文字I am a random text
不被任何包裹html
标签。
这是什么?


那么,你的答案是什么?


好吧,如果你回答3,你错了。哈哈,你好!


根据规范, an anonymous grid item
包裹在网格中的每一行文本中。


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

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

是的,答案是4.我们有3个显式网格项和1个匿名网格项!


知道了?

6. The margins of adjacent grid items do not collapse. {#6-the-margins-of-adjacent-grid-items-do-not-collapse-}


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


我的意思是,一个元素display: block
和另一个display: grid
有很多根本的区别。


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


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


所以,回到网格。


对于每个网格项,边距永远不会折叠。


嗯,这是可以理解的。让我告诉你原因。


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


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

网格项目放置在各自的网格区域内。他们留在自己不受干扰的地区。它们不受可折叠边缘的影响。挺酷的。


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


如果你很好奇块元素和网格元素之间存在其他差异,我写了一篇有趣的文章article
就此主题而言。

7. auto-fill and auto-fit. What's the difference? {#7-auto-fill-and-auto-fit-what-s-the-difference}


auto-fill
auto-fit
看起来像它们在某种程度上不同的功能。


它们在某种意义上是相似的,它们允许自动创建以某种方式填充网格容器的网格轨道。


例如,以下代码将创建尽可能多的代码200px
列适合窗口宽度。如果有剩余空间,它将分配给200px
列。

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

有什么不同?

auto-fill
即使没有网格项填充它也会创建轨道。auto-fit
不会这样做。它会将空轨道收缩到零。


就这样。

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-}


你记得奇怪的样子grid-template-areas
看起来像地图的值?


好吧,看来它可以快速搞砸了。


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


例如:

/* 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"

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

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


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


根据规范,百分比可以解决width
单独的元素,或left
/right
利润率width
top
/bottom
解决了height


为了在大多数浏览器中获得一致的呈现,请避免在网格项的填充或边距中使用百分比。


更重要的是,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}


假设你有一个这样的网格声明:

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

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


如果你也这样做了怎么办:

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

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


你有那个?


现在声明中存在冲突。那么,这是如何解决的?


根据规范,显式网格的大小由数量中的较大者确定rows/columns
被定义为grid-template-areas
和数量rows/columns
大小的grid-template-rows/grid-template-columns


规范可能看起来很简单。用简单的语言来说,这意味着,具有更多数量的声明rows
要么columns
胜。


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

*EDIT:
grid-template-areas
property用于将网格项放在网格上。那么,我们为什么要在网格定义中出现冲突呢?不应该只使用网格来定义网格grid-template-columns
grid-template-rows
属性?我在评论部分回答这个问题。看看这个。

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-row-gap
grid-column-gap
justify-content
align-content
。遗憾的是,也可以在曲目之间增加额外的空间。


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

BONUS: We can all contribute to making the DOCS better {#bonus-we-can-all-contribute-to-making-the-docs-better}


因为我是一个善良的灵魂,我在这里又增加了一个小费?


规范是由人类写的。事实上,人类可能会犯错误。


在阅读规范时,我发现了一个小错字。

@ireaderinokun
谁负责修复css网格规范中的拼写错误?我可能已经发现了一个pic.twitter.com/6ybI5Bx1Ok
--- Ohans Emmanuel(@OhansEmmanuel)July 13, 2017


那时,我不是特别肯定该怎么做。所以,我在Twitter上问过。


那种Jen Simmons
帮助在github上提交了一个问题,并得到修复。


那么,道德是什么?


您可以通过任何可能的方式做出贡献来帮助改善文档。


是的,就是你!


让我们一起改善网络。

Want to become Pro? {#want-to-become-pro}


下载我的免费CSS网格指南,并免费获得两个高质量的互动Flexbox课程!
如何掌握CSS网格,以及沿途构建的内容(免费PDF指南)

Get them now

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

查看英文原文

查看更多文章


公众号:银河系1号


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


(未经同意,请勿转载)