[CSS] Flex/Grid Layout Modules, part 14

中秋连假写稿好像有点不太应景，所以今天不会讲太多东西，最後把 Grid 单元的对齐稍微补一下，连假嘛，大家轻松一点。

不过武汉肺炎肆虐，大家还是小心为上。

单元的对齐

如同前些日子提及的，其实就只有两种，第三种是缩写不太想把他算进来。资料的部分就不再次贴过来，忘记的人请参考 之前的文章，这边简单说明一下，

就如同昨天提到的，这个里所谓的 对齐 其实主要的基准点就是格线轨道，所以，Grid 单元所谓的 as parent 有的时候是格线区域，并不是 Grid 容器。就以 normal 个关键字来说，他在不同的情况下，并不会全然的跟 auto 有相同的反应。

等等，你不是说不知道吗？

我这麽说你就信了？

这种东西太冷门，我想会遇到的机会可能也不是很高。在轨道区域单元当中 normal 会相当於 stretch，在 CSS 对齐模组当中，这个字在每一种系统中所呈现的结果都略有不同，讲起来其实很搥心肝，所以跟格线系统没啥太大关系就不赘述了。

总之，normal 在格线系统的单元中，等同於 stretch，只需要记得这件事情就好了。

对齐的权重顺序

在讲这些对齐属性之前，请先记得不要用 stretch 也不要乱用 margin，不然这些对齐的事情就是不会像是你想的那样，也就是 逻辑上他对齐了，但是实际上看起来没有。

对齐的部分基本上跟 Flexbox 所使用的方式雷同，只是 Flexbox 有 flex-* 开头的设定值，而 Grid 的部分是无法使用的。但，基本上能通用该通用的部分都通用了。

这也是为什麽讲到对齐就一直提到 CSS Box Alignment Module 的原因。

基本上，Grid 单元除了会受到 Grid 容器的对齐设定影响之外，自己本身的覆写状态也是决定对齐最终结果的一环。

讲是这样讲，还记得我们一开始有提过 Grid 单元轨道区域容器吗？

忘记的请这里复习
[CSS] Flex/Grid Layout Modules, part 7

当你的 Grid 单元使用了 position: absolute，且指定了上、右、下、左任何一个边界，只要符合轨道区域容器的条件，那麽，任何对齐的设定都会被忽略，换句话说，一切都以 position: absolute 为主。

所以，在格线轨道区域内的 Grid 单元，其对齐权重由高到低就是，

1. position: absolute ，并指定边界。
2. justify-self, align-self 覆盖。
3. margin 使用 auto 关键字。
4. 容器的 justify-items, align-items 设定。

所以，这就有点像是 position: absolute 会跳脱 Flexbox 的元件流一样，只不过在 Grid 生态系里面，由於可以定义轨道区域，所以那个区域就变成了一种 隐形的区块，在那里面的绝对定位就相对於区块内发生而已。

至於已经使用了格线系统，为何还要使用绝对定位？

事事没有绝对，除了数学！

数学不会就是不会！

超出格线

没问题，超出格线的 Grid 单元基本上一样可以对齐，但是，如果搭配了 safe 关键字的话，那麽结果可能会跟你想像的不太一样。如果忘记了什麽是 safe 请自行 回去复习。

没错，在 Grid 单元当中也是有 safe 可以使用，举例来说，

.grid-container {
    grid-template-columns: repeat(7, 100px);
}

.grid-item {
    grid-column: 1 / 5;
    
    justify-self: end;
    
    width: 1000px;
}

这麽做的话，由於 Grid 单元容器总共使用了 5 个轨道，所以基本上他的宽度会是 500px，这个时候偏偏 Grid 单元定义了 1000px 的宽度。所以根据 justify-self: end 的定义，他会对齐最後一个轨道，然後整个单元内容会超出容器。

如果在这边使用了 safe，即 justify-self: safe end 这样的设定，那麽由於容器超出，会触发 safe 的机制，所以他就会被换成 start 的结果，但是，你所使用的容器宽度，依旧会是 1000px 并不会改变。

小记

先预祝大家中秋佳节快乐～在 Grid 单元该叮咛的部分今天就算告一段落了。明天会开始讲一些格线系统中擅长与不擅长的部分，顺便抓一些时下流行的 CSS 框架出来讨论。

目录与小节：
[CSS] Flex/Grid Layout Modules, part 1

部落格同步放送：
[CSS] Flex/Grid Layout Modules, part 14