如果一直是跟着 CSS Grid 布局这个系列到这里，你应该还记得，在 CSS Grid 布局中，我们可以通过网格项目放置的方式，让不同的元素重叠在一起，并且通过 CSS 的 z-index 来控制网格项目在 z 轴上的层叠顺序。也就是说，以往需要使用 CSS 的 position 的绝对定位（absolute）来实现的布局，现在可以直接使用 CSS Grid 来解决。在这一节，我们主要来看如何使用 CSS Grid 实现元素叠加的布局效果。

Full-Bleed 是印刷界中的一个概念，被称为 全出血，即在印刷中，我们有出血量，这是纸张被修剪的地方以外的区域。正因如此，印刷设计师习惯于在设计工作中考虑出血量。我们通过设置安全区域来做到这一点。这几年，这种被称为“全出血”的概念也运用到 Web 的布局中。就是在受限宽度的一列中使用全宽元素的布局，比如在较窄的一列文本中使用一个边缘到边缘的图像。在社区中，也有人把这种布局效果称为 Full-Width 布局，也有人称为 Edge-To-Edge 布局。说实话，在Web中实现这种布局效果，已不是难事，社区中有很多种不同的技术方案，都可以达到这个布局效果。不过，今天我们以不同的角度来思考这个问题！

前两个有关于 CSS Grid 案例，主要介绍了如何使用 CSS Grid 来构建 重叠布局 和 Full-Bleed 布局。今天我们来一起再来看另一个由 CSS Grid 构建的网格布局，即 交叉布局。通过这个案例来更好的帮助我们更进一步理解 CSS Grid 的相关属性在实际中（Web 布局）如何使用。

一直以来，在 Web 布局中都是以方方正正的矩形向用户展示 UI 效果，而且众多 Web 开发者的意识中也是如此，Web 的布局是无法打破矩形排列的限制！但 Web 技术的发展速度是惊人的，每天都有新的东西出现在我们的眼前。就在这短短的几年时间内，用于 Web 布局的新特特别的多。换句话说，如果今天设计师跟你说：“亲，整一个类似杂志或报刊类的布局吧”！你会爽快的说 OK! 即，使用现在的新特性可以打破矩形框的限制，让你在 Web 上实现像杂志一样的排版布局。

十年前的 CSS 媒体查询 特性给 Web设计和开发带来新的变革，十年后的今天，CSS的容器查询 给 Web 设计和开发又进一步的带来质的变革。虽然CSS容器查询特性很强大，但它还只是部分主流浏览器的实验属性。因此要用到生产中还有要能要走一段漫长的路。不过，庆幸的是，现代的一些 Web 技术（比如，Flexbox、Grid、媒体查询和比较函数等）让我们离容器查询特性更近一步。今天我们来看看，这些现代Web技术是如何让我们离容器查询更近一步。

前段时间我们花了几篇篇幅的内容来介绍 CSS 容器查询特性的使用，并且介绍了现代 Web 布局技术让我们离 CSS 容器查询更近一步，但这些内容都只是和大家聊的是如何使用，以及其对 Web 开发者带来的变化。在介绍 CSS 容器查询特性的时候，也提到过，CSS 容器查询特性除了给 Web 开发者带来变化的同时也给 Web 设计者带来变化。那么，今天我们来和大家一起聊聊 CSS 容器查询给设计将带来什么样的变化。感兴趣的同学，请继续往下阅读。

时至今日，可用于现代 Web 布局的特性非常的多，可能大家最为熟知的还是 Flexbox，都觉得 Flexbox 布局可以一把梭。虽然说 Flexbox 布局已非常强大了，但他始终还是一维布局，对于一些二维布局的场景，他还是有很大的极限性。这也从侧面说明现代Web布局中或未来的布局方案中还是离不开 CSS Grid，毕竟到目前为止，他是唯一一个支持二维布局的技术。在 2021 年我花了几个月的时间，涉及到 CSS Grid 的都理了个遍，通过二十多篇文章来阐述 CSS Grid。可以说，这个系列算得上是全网较为系统介绍 CSS Grid 的了。如果我还未接触过，或对 CSS Grid 有一定的恐惧，那么这个系列值得你花时间阅读。

自从著名设计师 Ethan Marcotte（@beep）在 A List Apart 上发表了一篇名为《 Responsive Web Design 》的文章之后，响应式网页设计（RWD，即 Responsive Web Design）的身影就出现在了公众面前。自此就有了响应式 Web 设计这个概念。从提出这个概念到今天已经有十多年的时间了。在这十多年来，CSS 也发生了巨大的变化，新增了很多新的特性，近两年尤其如此（详细请参阅《2022 年的 CSS》一文）。这些变化，对于响应式Web设计的开发也有较大的改变。Una Kravets（@Una）大神，在2021的Google I/O 大会上的分享，提出 新的响应式：组件驱动式 Web 设计。 Web 生态即将进入响应式 Web 设计的新时代，并转变我们对其含义的看法，也为会Web设计带来新的变化。组件式驱动 Web 设计（或开发）也被称为是下一代响应式 Web 设计（或开发）。如果你对这方面话题感兴趣的话，请继续往下阅读。

2022年CSS Day于2022年6月9日和10日在阿姆斯特丹举行，这是时隔三年后再次举办的一次有关于CSS主题的盛会（上一届是2019年）。今年的CSS Day一共有14个关于CSS方面的话题，其中有几个话题是非常有意思的，比如 Lea Verou 的 《CSS Variable Secrets》、Bramus Van Damme的《The CSS Cascade, a deep dive》、Adam Argyle的《Oh Snap!》和 Michelle Barker 的《Creative CSS Layout》。就我个人而言，Michelle Barker 的 《Creative CSS Layout》话题我最为感兴趣，该话题围绕着 CSS 的一些新技术给Web布局带来的变化而展开。如果用一句话来描述的话，就是 CSS的新特性可以构建具有创造性的、灵活的Web布局。在接下来的内容中，我们一起来看看这个主题中所阐述的观点和内容，如果你感兴趣的话，请继续往下阅读。

已经很久没有看到有一本关于 Web 布局的书了。我在一些平台上搜索了一下，关于 Web 布局方面的书还是停留在多年以前，比如 DIV + CSS 方面的。基于这个原因，几年前我就开始想写一本关于 Web 布局方面的书。有一次有月影姐姐聊了一下我自己的想法，我说想写一本关于 现代 Web 布局方面的小册，后来得到月影姐姐的支持和鼓励，就有了现在这本小册！经过三个多月的全职时间创作，该小册已经接近尾声，现在面向大家！希望大家能喜欢！