依稀記得，某年廣東國文聯考作文的相關描述 -- “有時，常識雖易知而難行，有時，常識須推陳而出新”。人的想象力和創造力很容易在對常識的一貫認知中被削弱。
CSS 更新之快，隻能不斷鞭策自己持續學習，一直呆在舒适區中，很容易就跟不上節奏。當然，不僅僅是 CSS，對于任何技術任何行業也可以套用這句話。
回歸本文的主題 -- 新時代布局。運用現有的 CSS 技術，我們是否可以大膽的跳出正常思維，不再局限于矩形框框一塊一塊，試着更加藝術一些？
像是下面這幾個這樣。
不拘一格的線條：
文字随圖檔的邊緣排列：
不再是橫平豎直：
又或者造型怪異的網格：
是不是很有意思？不拘一格的布局能夠給頁面吸引更多的目光和流量，當然這也需要我對 CSS 掌握的足夠好，才能在有限的屬性中創造更多不同的可能性。
說到新時代布局和創意布局，就不得不提到 Grid 的布局。
CSS Grid 布局的二維特性，讓我們相較于傳統的float布局、定位布局、flex 布局有了對頁面更強大的掌控力。
這裡，我們利用 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 封面，像是這樣：
我們将一個 4x4 的 Grid 網格，分割為 9 個不同的部分：
再利用 clip-path，根據封面圖檔的的造型，對每一塊 Gird item 進行二次裁剪：
ok，最後把裡面的色塊替換成具體的圖檔即可：
CodePen Demo -- GTA 5 poster ( Grid and Clip Path)
當然這裡有一個槽點，最終還是用了 9 張圖檔，那為什麼不一開始直接用一張圖檔呢？😃
Grid 是在進行複雜布局的過程中非常好的幫手，它非常适合各種不規則網格塊的布局，這裡再提供一個 DEMO：
作者是 Olivia Ng，Demo 的連結 -- CodePen Demo -- CSS Grid: Train Ticket
瀑布流布局在現代布局中也非常常見，通常在一些照片牆中使用。像是這樣：
在之前，不借助 JavaScript，我們有 3 種純 CSS 的方式可以實作僞瀑布流布局(注意，這裡是僞瀑布流)，分别是：
使用 CSS column 實作瀑布流布局
使用 CSS flex 實作瀑布流布局
使用 CSS grid 實作瀑布流布局
你可以點進 Demo 看看，利用上述三種方式實作的瀑布流布局，缺點比較明顯：
對于 flex 和 column 布局而言，隻能實作豎直排布的瀑布流布局，第一列填充滿了填充第二列，以此類推
對于 Grid 布局而言，缺點則是無法自動适配不同的高度，需要手動指定每一個元素區塊大小
而在未來，标準基于 Grid 布局實作了 <code>grid-template-rows: masonry</code>，利用該标準，我們可以快速利用 Grid 實作水準排布的瀑布流布局，目前，你可以在 Firefox 體驗該功能。
<code>grid-template-rows: masonry</code> 是 firefox 在 firefox 87 開始支援的一種基于 grid 布局快速建立瀑布流布局的方式。并且 firefox 一直在推動該屬性進入标準當中。
從 firefox 87 開始，在浏覽器輸入網址欄輸入 <code>about:config</code> 并且開啟 <code>layout.css.grid-template-masonry-value.enabled</code> 配置使用。Can i use -- grid-template-rows: masonry
正常而言，我們想要實作瀑布流布局還是需要花費一定的功夫的，即便是基于 grid 布局。在之前，我們通過 grid 布局，通過精細化控制每一個 <code>grid item</code>，可以實作豎直方向的瀑布流布局：
效果如下：
CodePen Demo -- CSS Grid 實作僞瀑布流布局
在上述 Demo 中，使用 <code>grid-template-columns</code>、<code>grid-template-rows</code> 分割行列，使用 <code>grid-row</code> 控制每個 <code>grid item</code> 的所占格子的大小，但是這樣做的成本太高了，元素一多，計算量也非常大，并且還是在我們提前知道每個元素的高寬的前提下。
而在有了 <code>grid-template-rows: masonry</code> 之後，一切都會變得簡單許多，對于一個不确定每個元素高度的 4 列的 grid 布局：
正常而言，看到的會是這樣：
簡單的給容器加上 <code>grid-template-rows: masonry</code>，表示豎方向上，采用瀑布流布局：
便可以輕松的得到這樣一種水準方向順序排布元素的瀑布流布局：
如果你在使用 firefox，并且開啟了 <code>layout.css.grid-template-masonry-value.enabled</code> 配置，可以戳進下面的 DEMO 感受一下：
CodePen Demo -- grid-template-rows: masonry 實作瀑布流布局
多欄布局也屬于現在我們能夠掌控的布局之一，利用 CSS 較為新的特性 Multiple-column Layout Properties。
最簡單的多欄布局，我們隻需要用到 <code>column-count</code> 或者 <code>column-width</code>。
假設我們有如下 HTML：
簡單的 3 列布局：
通過 <code>column-count: 3</code> 指定 3 欄。
接下來，我們再了解下 <code>column-gap</code> 和 <code>column-rule</code>
column-gap：控制列與列之間的間隔，預設為關鍵字 <code>normal</code>，數值上為 <code>1em</code>
column-rule：控制列與列之間的樣式規則，其寫法與 <code>border</code> 類似，指定列之間的裝飾線
還是如下 HTML：
CodePen Demo -- CSS multi column Layout Demo
接着，還有一個很有意思的屬性 <code>column-span</code>，用于設定元素的跨列展示。
我們首先利用多列布局，實作這樣一個類似于報紙排版的布局樣式。
大概就是多列布局中嵌套标題，标題的加粗并且字号大一點：
通過給 <code>h2</code> 設定 <code>column-span: all</code>，讓 <code>h2</code> 标題跨列多列進行展示，改動一下 CSS：
即可得到這樣一個布局：
CodePen Demo -- CSS multi column Layout Demo 2
當然，<code>column-span</code> 有個缺陷，就是它的取值隻有 <code>column-span: all</code> 或者是 <code>column-span: none</code>，也就是要麼橫跨所有的列，要麼不跨列。
如果現在我有一個 3 列布局，但是隻希望其中的标題橫跨兩列，<code>column-span: all</code> 就無法實作了。
但是，通過嵌套其他布局，我們可以巧妙的對多列布局再進行升華，譬如 rachelandrew 就實作了這樣一種嵌套布局：
通過一個 2 列的 Grid 布局，嵌套一個兩列的 multi-column 布局，大緻的 CSS 如下：
這樣，我們就能實作視覺上的橫跨任意列的标題：
完整的 Demo 代碼你可以戳這裡：CodePen Demo -- Smashing Multicol: mixing layout methods -- By rachelandrew
OK，進入下一個子產品，主角是 <code>shape-outside</code>。
在之前，我也有寫過一篇關于 <code>shape-outside</code> 的文章 奇妙的 CSS shapes，感興趣的同學也可以先看看。
shape-outside CSS 屬性定義了一個可以是非矩形的形狀，相鄰的内聯内容應圍繞該形狀進行包裝。
利用它，我們就能夠很好的實作各種非橫平豎直的布局，讓布局真正的活起來。
圖文排列的交界處，可以是斜的，像是這樣：
CodePen Demo -- FCC: Build a Tribute Page - Michel Thomas by Stephanie
也可以是彎曲的，像是這樣：
CodePen Demo -- shape-outside: circle Demo
甚至，它是還可以動态變化的不規則容器：
CodePen Demo -- shape-outside animation
合理使用，我們就可以如報紙版創造各種花式布局效果：
不僅如此，袁川老師 甚至使用了 <code>shape-outside</code> 進行了一些 CSS 藝術創作，一起欣賞一下：
CodePen Demo -- shape-outside -- Face By yuanchuan
以開篇的這張圖為例子：
就是巧妙的運用 <code>shape-outside</code> 的例子，它将整個布局分為了 7 塊，每一塊分别使用 <code>shape-outside</code> 進行精細化的控制，實際上完整的布局是這樣的：
在這篇文章中，對這個 DEMO 進行了非常詳細的闡述：A CSS Venn Diagram
如果你也對 <code>shape-outside</code> 感興趣，在這份收藏夾裡，收藏了 CodePen 上非常多精良的 <code>shape-outside</code> 布局 DEMO，不妨一看學習學習 -- CSS Shapes Experiments
在今天，實作有創意的布局也需要我們掌握更多的 CSS 屬性與技巧，本文粗略的介紹了幾種在今天實作創意布局的有益屬性：
Grid 布局全家桶以及利用 Grid 實作瀑布流布局
多欄布局 multiple-column 及多欄布局嵌套其他布局
<code>shape-outside</code> 的各種應用
在上述布局中穿插使用 <code>clip-path</code>、<code>transform</code> 等屬性以增強各種布局
當然，CSS 能實作的遠不止如此，像是滾動視差、3D 變換等等都是可以利用 CSS 實作并且再融合進布局當中的屬性。當然這也需要我們有創造和發現美的眼睛和思維。
好了，本文到此結束，希望對你有幫助 😃
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。