[CSS] Flex/Grid Layout Modules, part 15

烫伤了手停了几天，不过差不多 15 天好像就交代完所有的东西了。剩下的大部分是比较冷门，甚至是 Grid Layout Module Level 2 的事情，虽然支援度还有待商榷，不过还是多少可以讲一点。

手是好了点，倒不用太担心。

Grid 能与不能

如果很有耐心的看到这里，我就假设大家都已经知道 Grid Layout Module 的基本操作方式。那麽，我们就可以来看看 Grid 到底在哪些情况下，能做到哪些事情，不能做到哪些事情。

首先，可以做得到的地方很多，我们就单讨论 做不到 的地方比较快，

非矩型区块
非矩型区块
非矩型区块

是，基本上你想要用 Grid 来实作各种 Layout 不会有太大问题，就是除了 非矩型区块 以外的设计，基本上都能用 Grid 来制作。但是，还是得强调一下，如同 <div> 盛行的年代，不是什麽东西都用 Grid 来排，这样不会比较潮。

另外一些 比较不能做的 部分也是有，但个人觉得那是属於比较例外（或是说意外）的部分，总结前面那些章节来说，那些例外且需要注意的地方有，

无限宽度（高度）物件 Part 6, Part 11
隐性格线在浏览器的 Bug Part 10
间隔尺寸无法消灭 Part 10
零尺寸网格轨道 Part 12
fr 的演算规则 Part 7
fit-content() 的演算规则 Part 9
minmax() 的演算规则 Part 9

基本上这些都是你在制作格线系统上必须留意的地方，大方向虽然是矩型区块，但这些小地方还是有机会让你的 Layout 发生奇怪的事情，然後会让你觉得莫名其妙的地方。具体的例子我就不赘述了，前述的章节多少都有提到。

其中最让人觉得麻烦的是浏览器实作的部分，虽然说 Grid 已经这麽多年了，但浏览器对於网格实作与渲染方式还是略有差异（虽然目前主流浏览器对於 Grid 渲染已经不会有太多例外）。这也是为何 Microsoft Edge 在 Chromium 协助重写了一个新的渲染引擎，

Compat2021: Improving CSS Grid compatibility with GridNG

然後他说 Issue 要回报给 Chromium（笑），不知道哪一天会回到 Chrome 身上？目前看起来 Edge 93 之後应该会用上新的 GridNG，但实际上查询 Microsoft 那边的 Release Notes 也没有特别提到这件事情。但就是期待，~~毕竟对於 Grid Layout Level 2 有相对好的支援的话，也是乐见其成。~~

谨慎设定你的网格轨道

其实你会发现我几乎每一篇都会讲到尺寸的事情，你应该会发现，无论你是否使用固定尺寸的网格容器，或是弹性尺寸的网格容器，只要我们在 网格轨道设定稍有不慎，那麽这个 网格容器的尺寸基本上形同虚设。

换句话说，以下这些都会让你的网格轨道爆掉，

网格单元指定超出轨道数量（任何方向都是）。
跨网格单元超出轨道数量（任何方向都是）。
网格单元使用命名网格，但不存在。
隐性轨道尺寸总和大於网格容器。
grid-template 写错。

嗯，不要怀疑，最後一点是认真的。

fieldset {
    display: grid;
    grid-temlate: "foo boo ." auto / 25% 1fr 50%;
}

以上是合法的写法，但还是得想清楚，明确的知道自己在做什麽再这样写。不然其实 复制，贴上，不会改 的状况应该也是不少，俗语好像叫做知其然而不知起所以然？

隐性格线在浏览器渲染的设定雷

不知道你们有没有发现我在 Part 8 提及隐性格线时，并没有特别着墨在轨道格线的数字上。

因为有雷啊（灿笑。

上面提到了让网格系统爆掉的事情，除非你是故意的，或者你想善用隐性格线来帮你做些什麽事情，那麽，你就必须留意关於隐性格线轨道的数字问题。我举个实际的例子，然後将渲染结果贴上来给你们看看，

.grid-container {
  display: grid;
  grid-template: auto / repeat(3, 1fr);
  
  grid-auto-rows: 150px;
  grid-auto-columns: 50px;
  
  gap: 10px;
}

.grid-item:nth-of-child(1) {
  grid-column: span 4;
  grid-row: 2 / 3;
}

.grid-item:nth-of-child(2) {
  grid-column: 3 / 9;
  grid-row: 3 / 4;
}

.grid-item:nth-of-child(3) {
  grid-column: -1 / -3;
  grid-row: 4 / 5;
}

先不管这个设定是否合理，我们来看看渲染结果，我测试的浏览器有：