依稀记得，某年广东语文高考作文的相关描述 -- “有时，常识虽易知而难行，有时，常识须推陈而出新”。人的想象力和创造力很容易在对常识的一贯认知中被削弱。
CSS 更新之快，只能不断鞭策自己持续学习，一直呆在舒适区中，很容易就跟不上节奏。当然，不仅仅是 CSS，对于任何技术任何行业也可以套用这句话。
回归本文的主题 -- 新时代布局。运用现有的 CSS 技术，我们是否可以大胆的跳出常规思维，不再局限于矩形框框一块一块，试着更加艺术一些？
像是下面这几个这样。
不拘一格的线条：
文字随图片的边缘排列：
不再是横平竖直：
又或者造型怪异的网格：
是不是很有意思？不拘一格的布局能够给页面吸引更多的目光和流量，当然这也需要我对 CSS 掌握的足够好，才能在有限的属性中创造更多不同的可能性。
grid 布局
说到新时代布局和创意布局，就不得不提到 Grid 的布局。
CSS Grid 布局的二维特性，让我们相较于传统的float布局、定位布局、flex 布局有了对页面更强大的掌控力。
利用 Grid 布局，切割页面进行分块
这里，我们利用 Grid 布局的特性，可以将页面按照我们的所想任意切割成不同的块状区域。
这里推荐一些能够方便我们进行 Grid 布局的工具：
- 快速进行 Grid 布局 - Grid Layoutit
利用这个工具，可以快速创建得到自己想要 Grid 布局，并且拿到对应的 CSS，非常的简单便捷。
这里我利用工具，将页面切割成了 A、B、C、D、E、F 6 块区域：
复制右侧的 HTML 和 CSS，可以快速的得到这样一个布局，我把代码拷贝到了 CodePen，简单添加了一下底色，我们就可以基于这个布局再去做任何事情：
CodePen Demo -- Grid Layout Demo
利用 Grid 布局配合 clip-path 实现 GTA5 封面
这里，我们可以利用 Grid 布局配合 clip-path 实现 GTA5 封面，像是这样：
我们将一个 4x4 的 Grid 网格，分割为 9 个不同的部分：
再利用 clip-path，根据封面图片的的造型，对每一块 Gird item 进行二次裁剪：
ok，最后把里面的色块替换成具体的图片即可：
CodePen Demo -- GTA 5 poster ( Grid and Clip Path)
当然这里有一个槽点，最终还是用了 9 张图片，那为什么不一开始直接用一张图片呢？