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

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

subgrid 进入 CSS Grid 布局模块的 Level 2 规范之前，嵌套网格、subgrid 和 display: contents 就有深度的讨论，最终 subgrid 得到更多的支持，也最终成为规范中的一部分。也就是说，嵌套网格 和 display: contents 都可以实现类似 subgrid 的布局。那这一节中，和大家来探讨 display: contents 和 subgrid 有何差异？

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

奇妙的CSS计数器世界主要分为三个部分，在第一部分中介绍了 list-style 的基本使用之外，主要是向大家阐述了如何使用 @counter-style 实现自定义的列表项标记符（list-style-type）；在第二部分中介绍列表标记框，即伪元素 ::marker的使用以及可用于::marker上的CSS属性。至此，我们可以在::marker、::before和::after三个伪元素上的content生成内容，来构建更具个性化的列表项标记符。虽然如此，要实现具有计数（或者说编号）的列表项符号样式，还是需要CSS的计数器来助力，即counter-reset、counter-increment和counter()及counters()函数。在接下来的内容，主要围绕着这几个属性展开。感兴趣的请继续往下阅读。

在 奇妙的 CSS 计数器世界 第一部分 主要介绍了使用 list-style（以及它们的子属性list-style-type、list-style-image和list-style-position）属性给列表项设置列表项标记符样式。除此之外，还可以使用 @counter-style 规则来自定义列表项标记符（list-style-type的值）。事实上，每个列表顶的标记符都是::marker伪元素生成的标记框的内容。在这部分中，我们开始进入::marker伪元素世界。感兴趣的请继续往下阅读。

这是有关于列表造型设计相关的话题，简单地说，就是CSS给列表项设计样式造型。可能你会觉得这样的话题有什么好聊的，不就是用list-style 相关的属性给 li 列表项或者display为list-item的元素设置样式吗？说实话，一直以来我就是这么认为的，但自从看到 @counter-style 给列表项自定义表情符的标记时，让我感到好奇。随着继续往下探究，发现这里面有很多很有意思的东西，所以我觉得在 图解CSS系列 中单独用一篇文章和大家来聊 CSS计数器的奇妙世界。感兴趣的同学请继续往下阅读。

对于众多 CSSer 来说，多年来一直希望在原生的 CSS 有类似变量，嵌套和函数等特性。虽然近些年，CSS 得到快速的发展，比如说，大家期望的 CSS 变量已经可以直接在 CSS中使用了，CSS也具备一些函数计算（甚至简单的逻辑判断）能力。今天要告诉大家的是，CSS 原生的嵌套很快就会出现在浏览器上。在今天这篇文章中就将和大家一起来聊聊 CSS 中原生的嵌套，以及如何使用它，在使用的过程需要怎样避免一些陷阱。

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

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