在 CSS 中，早期给元素设置宽高比都是通过一些 CSS Hack 来完成，比如padding-top（或 padding-bottom）的值为元素宽高比的百分比。不过自 Chrome90、Firefox88 和 Safar Technology Preview 之后，可以使用原生的 CSS 宽高比属性 aspect-ratio。在这一节中将和大家探讨宽高比（aspect-ratio）在 CSS 网格中的运用。在开始之前，先简单的回忆一下 CSS 的 aspect-ratio。

如果你熟悉 Flexbox 布局 的话，那么你应该知道 Flex 容器中对 Flex项对齐的方法。这些对齐属性最早只是运用于 Flex 容器和 Flex 项目上（也就是 Flexbox 布局中），后来随着 CSS 规范的变革，运用于 Flexbox 中的对齐方式的相关属性被移动一个新的规范中，即 盒模型对齐 Level 3（CSS Box Alignment Module Level 3） 的规范中，这个规范详细的定义了在不同的布局方式下如何处理对齐问题。目前该规范定义的对齐方式主要运用于 Flexbox 布局和 Grid 布局中。每种布局方式对盒模型对齐规范（CSS Box Alignment）的实现都略有差异，因为实际情况是每种布局方式都有各自的特点以及历史包袱，不能期望在所有的实现方式中都有完美一致的表现（对齐方式的表现）。而我们接下来主要和大家聊的是该规范在 CSS Grid 布局模式下的对齐方式。

这是一个很有意思的话题，仅从标题中我们可以得到两个关键词 完美 和 缩放。对于 Web 前端开发者而言，特别对于 UI 还原方面（天朝称“切图”，国外称“UI Developer”）更多追求的是像素级还原（即“Pixel-Perfect”），但随着更多的移动终端出现之后，特别更多的业务重心放到移动端之后，Web 开发者把更多的重心放在移动端。为此在业内出现了更多有关于移动端适配的方案，比如 Rem适配 和 VW适配 等。但这些都离我们所说的像素级还原目标越来越远。换句话说，如果我们既要（像素级还级）又要（完美缩放或适配），该怎么办呢？如果你对该话题感兴趣，那么接下来的内容值得你花一定时间阅读。

如果你阅读过早前分享过的《CSS媒体查询新特性》和《给网站添加暗黑模式》相关的文章，就可能想到了今天这篇文章大致和大家要聊的是些什么东西。事实上也的确如此，但或许和想象的略有差异，因为在这篇文章和大家聊的并不是 CSS 的媒体查询，也不是教大家怎么给网站添加暗黑模式的主题。如果是这样的话，就有点对不起大家了，大家也会觉得我在不断的炒冷饭。接下来要和大家聊的虽然也和 CSS 有关联，但对于很多同学来说，还是很新，很有意思的东西。感兴趣的同学请继续往下阅读。

既然 CSS Grid 布局已经来到我们的身边，我们开始在网上看到越来越多的类似于杂志式的 Web 布局。这并不是不可能的，如果你经常关注 Codepen 的话，你会发现在该平台上有很多类似杂志式的布局。这一切都是有原因的： 它们干净、可读、有吸引力，而且令人熟悉。甚至说，在未来的某一天（这个时间不会太久），你就会接到这样的需求，创建一个类似杂志的布局。 CSS Grid 的到来，让这一切已变得非常的容易，因为 CSS Grid 是一个非常强大的布局系统（通过前面的学习，或许你已经有感知了），可以用于创建复杂、独特的二维布局。而一个类似杂志式的布局有着其自身最大的特征，尤其是使用 CSS Grid 构建一个杂志式的布局更是如此：“将 Web 内容组织成一个结构良好的网格” 和“用重叠的网格项目来突破网格”。对于这两点，CSS Grid 都占有绝对的优势，在 CSS Grid 布局中，我们可以使用网格项目的重叠和定位，使用偏移（inset，即top、right、bottom 和 left）、负边距（margin）和变换（transform）来构构建。但是，在 CSS Grid 中，可以使用更有 逻辑性、 可读性 的属性和值来建立定位叠加的元素。接下来的内容，我们将围绕着这方面来展开。

在 CSS 网格中除了使用明确指定网格项目位置的属性之外，还可以使用grid-auto-flow有不同模式来自动放置网格项目。到目前为止，我们所阐述的网格项目都是用不同的网格区域来放置网格项目，但网格布局中的网格项目有可能是会重叠在一起的。那么接下来的一节中，将和大家一起来探讨网格项目重叠和定位相关的知识。

前面花了很多篇幅和大家一起探讨了 CSS 网格布局系统中的一些重要概念，并且深入探讨了运用于网格容器上属性的知识和使用。不过我们只围绕着 grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns 和 grid-ato-flow 展开，对于子网格、瀑布流以及对齐等相关的话题并未展开，留到后面再做探讨。在学习运用于网格容器上属性的时候，在相关的示例中用到了用于网格项目的属性，比如grid-row、grid-column、grid-area等，并且还多次提到网格项目放置这个概念。或许你对它们的使用有了一个基本的了解，但要彻底掌握他们，我们还是很有必要花更多的时间来学习和探讨。

在 CSS 网格系统中，网格线是一个非常重要的概念。默认情况之下，只要定义了一个网格系统，就会默认创建以数字为索引号的网格线名称（行网格线名称和列网格线名称）。除此之外，还要以在 grid-template-columns 和 grid-template-rows 中显式的在中括号[]中给网格线指定名称。通过前面章节的学习，CSS 网格系统中有显式网格和隐式网格之分，同样的，网格线也有显式网格线和隐式网格线之分，位于显式网格上的网格线被称为显式网格线，位于隐式网格上的网格线被称为隐式网格线。而且在网格系统中，明确放置网格项目时离不开网格线，换句话说，网格线命名的好不好直接会影响我们网格项目放置。在这篇文章中将主要和大家探讨网格线怎么命名？感兴趣的请继续往下阅读。

在 Part6 和大家一起探讨了在网格布局中怎么使用 grid-auto-columns 和 grid-auto-rows 以及 grid-row、grid-column 和 grid-area 创建隐式网格。在使用 grid-row 、grid-column 或 grid-area 放置网格项目的时候，有可能会造成网格缺口出现。在网格布局中，我们可以使用 grid-auto-flow 属性让网格项目更好的被放置到网格单元格上。这篇文章主要和大家探讨了网格项目自动放置属性 grid-auto-flow 的基本语法和自动放置规则等特性，感兴趣的继续往下阅读。

CSS 网格布局中有 显式网格 和 隐式网格 之分，在 CSS 网格布局中可以使用 grid-template-columns 、 grid-template-rows 和 grid-template-areas 可以定义显式网格，并且可以定义显式网格固定的网格轨道数量，同时 grid-template-columns 和 grid-template-rows 可以用来显式指定网格轨道尺寸。而在 CSS 网格布局中，可以在网格容器上使用 grid-auto-columns 、 grid-auto-rows 和 grid-auto-flow 可以显式定义隐式网格，并且 grid-auto-columns 和 grid-auto-rows 可以用来指定隐式网格轨道的尺寸。那么在这篇文章中，主要和大家一起探讨在 CSS 网格布局中如何定义隐式网格和指定隐式网格轨道尺寸。