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

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

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

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

对于大多数 Web 开发者（或 CSSer）而言，更为熟悉的是物理属性，比如width、height、top、right、bottom、left等。但我们在图解 CSS 系列中的《CSS逻辑属性》一章中和大家聊过 CSS 逻辑属性和逻辑值，以及逻辑属性与物理属性，逻辑值与物理值之间的对应关系。在网格布局的整个系列中，前面和大家一起讨论的都是在物理属性和ltr（Left-To-Right）书写模式（或阅读模式）下的网格布局。接下来，在这部分将和大家一起探讨网格布局遇上逻辑属性和书写模式下的表现。

当 CSS Grid 布局在 2017 年最初发布时，设计师和开发人员为二维布局和优化布局系统而设计时感到非常兴奋。 通过前面的学习，我们也领略到了网格布局的魅力，CSS 网格让我们可以轻松地做许多以前做不到的事情。其中一个较大的限制是，嵌套的网格不能参与其父网格的大小调整。这也是一个从一开始就被认为很重要的功能，然而，由于其复杂性，一度曾被废弃的子网格被推迟到 CSS Grid布局模块的 Level 2 中。一段时间以来，关于subgrid的使用情况、如何实现它的问题有很多讨论，甚至还有一些关于是否需要它的辩论。很多讨论都是围绕着另外两种可以处理许多与subgrid相同问题的方法：嵌套网格 和 display: contents。接下来，我们将花一些篇幅来阐述嵌套网格和subgrid，即我们将了解哪些是相似的，哪些是subgrid与嵌套网格区别？以及阐述在一些非常有效的情况下，子网格是真正需要的，而在另一些情况下，它并不是严格需要的，但会带来一个更简洁的解决方案。那我们先从嵌套网格开始。

自从多列布局、Flexbox布局和Grid布局得到浏览器支持之后，就可以使用这些特性来实现 瀑布流的布局 ，但这些技术实现的瀑布流布局都或多或少存有一定的缺陷。不过，值得庆幸的是，CSS 网格布局的第3级（CSS Grid Layout Module Level 3） 将真正的瀑布流布局纳入了 W3C 规范中，称得上真正的瀑布流布局。不过遗憾的是，支持该规范草案的主流浏览器并不多，只有Firefox 和 Firefox Nightly。虽然这个功能还不能用于实际生产中，但你的试用以及使用之后的反馈是很有价值的，这有助于确保它满足你对这种布局的要求。

我们花了很长的一段时间和多篇文章的篇幅和大家一起探讨了 CSS 网格布局模块的特性。从前面这些内容，不难发现网格布局的复杂性，灵活性。我想大家也意识到了，CSS Grid到来之后，Web中设计布局的方法也已经改变了。我们可以在纸上绘制布局草图，思考布局设计的全部内容。当你开始敲击代码的时候，就已经知道布局会是什么样子。正因为CSS Grid布局的复杂性，再加上网格容器上定义的网格是不可见的。为此我们不得不考虑，如何更轻易的使用网格，或者碰到网格布局相关的 Bug，又应如何来调试。熟悉 Web 开发的同学都知道，在调试布局或CSS相关的问题时，喜欢在元素上添加一个边框。在网格布局中，虽然可以使用类似的方法在网格容器和网格项目中添加边框，帮助我们快速的定位；但是我们没法给网格线添加边框。不过庆幸的是，目前主流的浏览器，比如 Chrome、Firefox、Safari 和 Microsoft Edge 浏览器的开发者工具（DevTools）都提供了网格布局审查器。有了这些工具之后，可以快速的帮助我们使用网格，调试使用网格碰到的问题。

CSS Grid 模块的出现以及浏览器对其支持，为 Web 布局提供了前所未有的可能性。我们可以用更少的元素（更简洁的 HTML 结构）构建更复杂的设计。这比我们一直认为非常强大的 Flexbox 要更强很多。但是，当你想到 CSS Grid 时，你一般会想到是我们平时习以为常的方块布局，对吗？@Andy Barefoot 在他的个人网站 和 Codepen 上提供了很多有创意的响应式布局效果，让你会对 Web 布局有一种焕然一新的感觉，感觉与你的经典 Web 设计（规规矩矩方块布局），而且他使用了 CSS Grid 布局来做到这一点。