新時代創意布局不完全指南
依稀記得，某年廣東語文高考作文的相關描述 -- “有時，常識雖易知而難行，有時，常識須推陳而出新”。人的想象力和創造力很容易在對常識的一貫認知中被削弱。
CSS 更新之快，只能不斷鞭策自己持續學習，一直呆在舒適區中，很容易就跟不上節奏。當然，不僅僅是 CSS，對于任何技術任何行業也可以套用這句話。
回歸本文的主題 -- 新時代布局。運用現有的 CSS 技術，我們是否可以大膽的跳出常規思維，不再局限于矩形框框一塊一塊，試著更加藝術一些?
像是下面這幾個這樣。
不拘一格的線條：
CSS Tricks 某時期官網
文字隨圖片的邊緣排列：
不再是橫平豎直：
又或者造型怪異的網格：
GTA 5 封面
是不是很有意思?不拘一格的布局能夠給頁面吸引更多的目光和流量，當然這也需要我對 CSS 掌握的足夠好，才能在有限的屬性中創造更多不同的可能性。
Grid 布局
說到新時代布局和創意布局，就不得不提到 Grid 的布局。
CSS Grid 布局的二維特性，讓我們相較于傳統的float布局、定位布局、flex 布局有了對頁面更強大的掌控力。
利用 Grid 布局，切割頁面進行分塊
這里，我們利用 Grid 布局的特性，可以將頁面按照我們的所想任意切割成不同的塊狀區域。
這里推薦一些能夠方便我們進行 Grid 布局的工具：
快速進行 Grid 布局 - Grid Layoutit[1]
利用這個工具，可以快速創建得到自己想要 Grid 布局，并且拿到對應的 CSS，非常的簡單便捷。
這里我利用工具，將頁面切割成了 A、B、C、D、E、F 6 塊區域：
復制右側的 HTML 和 CSS，可以快速的得到這樣一個布局，我把代碼拷貝到了 CodePen，簡單添加了一下底色，我們就可以基于這個布局再去做任何事情：
CodePen Demo -- Grid Layout Demo[2]
利用 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)[3]
當然這里有一個槽點，最終還是用了 9 張圖片，那為什么不一開始直接用一張圖片呢?:)
Grid 是在進行復雜布局的過程中非常好的幫手，它非常適合各種不規則網格塊的布局，這里再提供一個 DEMO：
作者是 Olivia Ng[4]，Demo 的鏈接 -- CodePen Demo -- CSS Grid: Train Ticket[5]
瀑布流布局
瀑布流布局在現代布局中也非常常見，通常在一些照片墻中使用。像是這樣：
在之前，不借助 JavaScript，我們有 3 種純 CSS 的方式可以實現偽瀑布流布局(注意，這里是偽瀑布流)，分別是：
- 使用 CSS column 實現瀑布流布局[6]
- 使用 CSS flex 實現瀑布流布局[7]
- 使用 CSS grid 實現瀑布流布局[8]
你可以點進 Demo 看看，利用上述三種方式實現的瀑布流布局，缺點比較明顯：
- 對于 flex 和 column 布局而言，只能實現豎直排布的瀑布流布局，第一列填充滿了填充第二列，以此類推
- 對于 Grid 布局而言，缺點則是無法自動適配不同的高度，需要手動指定每一個元素區塊大小
而在未來，標準基于 Grid 布局實現了 grid-template-rows: masonry，利用該標準，我們可以快速利用 Grid 實現水平排布的瀑布流布局，目前，你可以在 Firefox 體驗該功能。
使用 grid-template-rows: masonry 實現水平方向排布的瀑布流布局
grid-template-rows: masonry 是 firefox 在 firefox 87 開始支持的一種基于 grid 布局快速創建瀑布流布局的方式。并且 firefox 一直在推動該屬性進入標準當中。
從 firefox 87 開始，在瀏覽器輸入網址欄輸入 about:config 并且開啟 layout.css.grid-template-masonry-value.enabled 配置使用。Can i use -- grid-template-rows: masonry[9]
正常而言，我們想要實現瀑布流布局還是需要花費一定的功夫的，即便是基于 grid 布局。在之前，我們通過 grid 布局，通過精細化控制每一個 grid item，可以實現豎直方向的瀑布流布局：
- <div class="g-container">
- <div class="g-item">1</div>
- <div class="g-item">2</div>
- <div class="g-item">3</div>
- <div class="g-item">4</div>
- <div class="g-item">5</div>
- <div class="g-item">6</div>
- <div class="g-item">7</div>
- <div class="g-item">8</div>
- </div>
- .g-container {
- height: 100vh;
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- grid-template-rows: repeat(8, 1fr);
- }
- .g-item {
- &:nth-child(1) {
- grid-column: 1;
- grid-row: 1 / 3;
- }
- &:nth-child(2) {
- grid-column: 2;
- grid-row: 1 / 4;
- }
- &:nth-child(3) {
- grid-column: 3;
- grid-row: 1 / 5;
- }
- &:nth-child(4) {
- grid-column: 4;
- grid-row: 1 / 6;
- }
- &:nth-child(5) {
- grid-column: 1;
- grid-row: 3 / 9;
- }
- &:nth-child(6) {
- grid-column: 2;
- grid-row: 4 / 9;
- }
- &:nth-child(7) {
- grid-column: 3;
- grid-row: 5 / 9;
- }
- &:nth-child(8) {
- grid-column: 4;
- grid-row: 6 / 9;
- }
- }
效果如下：
CSS Grid 實現偽瀑布流布局
CodePen Demo -- CSS Grid 實現偽瀑布流布局[10]
在上述 Demo 中，使用 grid-template-columns、grid-template-rows 分割行列，使用 grid-row 控制每個 grid item 的所占格子的大小，但是這樣做的成本太高了，元素一多，計算量也非常大，并且還是在我們提前知道每個元素的高寬的前提下。
而在有了 grid-template-rows: masonry 之后，一切都會變得簡單許多，對于一個不確定每個元素高度的 4 列的 grid 布局：
- .container {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- }
正常而言，看到的會是這樣：
簡單的給容器加上 grid-template-rows: masonry，表示豎方向上，采用瀑布流布局：
- .container {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- + grid-template-rows: masonry;
- }
便可以輕松的得到這樣一種水平方向順序排布元素的瀑布流布局：
如果你在使用 firefox，并且開啟了 layout.css.grid-template-masonry-value.enabled 配置，可以戳進下面的 DEMO 感受一下：
CodePen Demo -- grid-template-rows: masonry 實現瀑布流布局[11]
多欄布局
多欄布局也屬于現在我們能夠掌控的布局之一，利用 CSS 較為新的特性 Multiple-column Layout Properties[12]。
最簡單的多欄布局，我們只需要用到 column-count 或者 column-width。
假設我們有如下 HTML：
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
簡單的 3 列布局：
- p {
- width: 800px;
- column-count: 3;
- font-size: 16px;
- line-height: 2;
- }
通過 column-count: 3 指定 3 欄。
column-gap 控制間距 & column-rule 控制列與列間樣式
接下來，我們再了解下 column-gap 和 column-rule
- column-gap：控制列與列之間的間隔，默認為關鍵字 normal，數值上為 1em
- column-rule：控制列與列之間的樣式規則，其寫法與 border 類似，指定列之間的裝飾線
還是如下 HTML：
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
簡單的 3 列布局：
- p {
- width: 800px;
- column-count: 3;
- font-size: 16px;
- line-height: 2;
- + column: 1px solid #999;
- + column-gap: 2em;
- }
CodePen Demo -- CSS multi column Layout Demo[13]
column-span 設置跨列
接著，還有一個很有意思的屬性 column-span，用于設置元素的跨列展示。
我們首先利用多列布局，實現這樣一個類似于報紙排版的布局樣式。
- <div class="g-container">
- <p>Lorem ipsum dolor sit amet ... </p>
- <h2>Title Lorem ipsum dolor sit amet consectetur adipisicing elit title</h2>
- <p>Lorem ipsum dolor sit amet ... </p>
- </div>
- .g-container {
- width: 800px;
- column-count: 3;
- column-rule: 1px solid #aaa;
- column-gap: 2em;
- }
- h2 {
- margin: 14px 0;
- font-size: 24px;
- line-height: 1.4;
- }
大概就是多列布局中嵌套標題，標題的加粗并且字號大一點：
通過給 h2 設置 column-span: all，讓 h2 標題跨列多列進行展示，改動一下 CSS：
- h2 {
- margin: 14px 0;
- font-size: 24px;
- line-height: 1.4;
- + column-span: all;
- + text-align: center;
- }
即可得到這樣一個布局：
CodePen Demo -- CSS multi column Layout Demo 2[14]
多欄布局搭配其他布局實現更復雜的布局
當然，column-span 有個缺陷，就是它的取值只有 column-span: all 或者是 column-span: none，也就是要么橫跨所有的列，要么不跨列。
如果現在我有一個 3 列布局，但是只希望其中的標題橫跨兩列，column-span: all 就無法實現了。
但是，通過嵌套其他布局，我們可以巧妙的對多列布局再進行升華，譬如 rachelandrew[15]就實現了這樣一種嵌套布局：
- <div class="container">
- <article>
- <p>By way of precaution ...</p>
- <h2>the first that ever burst Into that silent sea;</h2>
- <p>and with what ...</p>
- </article>
- <aside>
- <img src="demo.jpg">
- <figcaption>The Authoress, her Father and Mr. Spencer making an ascent</figcaption>
- </aside>
- </div>
通過一個 2 列的 Grid 布局，嵌套一個兩列的 multi-column 布局，大致的 CSS 如下：
- .container {
- max-width: 800px;
- display: grid;
- grid-gap: 1em;
- grid-template-columns: 2fr 1fr;
- align-items: start;
- }
- h2 {
- column-span: all;
- text-align: center;
- }
- .container article {
- column-count: 2;
- column-gap: 2em;
- column-rule: 1px solid #ccc;
- }
- .container aside {
- border-left: 1px solid #ccc;
- padding: 0 1em;
- }
這樣，我們就能實現視覺上的橫跨任意列的標題：
完整的 Demo 代碼你可以戳這里：CodePen Demo -- Smashing Multicol: mixing layout methods -- By rachelandrew[16]
shape-outside 讓布局插上想象的翅膀
OK，進入下一個模塊，主角是 shape-outside。
在之前，我也有寫過一篇關于 shape-outside 的文章 奇妙的 CSS shapes[17]，感興趣的同學也可以先看看。
shape-outside[18] CSS 屬性定義了一個可以是非矩形的形狀，相鄰的內聯內容應圍繞該形狀進行包裝。
利用它，我們就能夠很好的實現各種非橫平豎直的布局，讓布局真正的活起來。
圖文排列的交界處，可以是斜的，像是這樣：
CodePen Demo -- FCC: Build a Tribute Page - Michel Thomas by Stephanie[19]
也可以是彎曲的，像是這樣：
CodePen Demo -- shape-outside: circle Demo[20]
甚至，它是還可以動態變化的不規則容器：
CodePen Demo -- shape-outside animation[21]
合理使用，我們就可以如報紙版創造各種花式布局效果：
不僅如此，袁川老師[22] 甚至使用了 shape-outside 進行了一些 CSS 藝術創作，一起欣賞一下：
CodePen Demo -- shape-outside -- Face By yuanchuan[23]
以開篇的這張圖為例子：
就是巧妙的運用 shape-outside 的例子，它將整個布局分為了 7 塊，每一塊分別使用 shape-outside 進行精細化的控制，實際上完整的布局是這樣的：
在這篇文章中，對這個 DEMO 進行了非常詳細的闡述：A CSS Venn Diagram[24]
如果你也對 shape-outside 感興趣，在這份收藏夾里，收藏了 CodePen 上非常多精良的 shape-outside 布局 DEMO，不妨一看學習學習 -- CSS Shapes Experiments[25]
總結一下
在今天，實現有創意的布局也需要我們掌握更多的 CSS 屬性與技巧，本文粗略的介紹了幾種在今天實現創意布局的有益屬性：
- Grid 布局全家桶以及利用 Grid 實現瀑布流布局
- 多欄布局 multiple-column 及多欄布局嵌套其他布局
- shape-outside 的各種應用
- 在上述布局中穿插使用 clip-path、transform 等屬性以增強各種布局
當然，CSS 能實現的遠不止如此，像是滾動視差、3D 變換等等都是可以利用 CSS 實現并且再融合進布局當中的屬性。當然這也需要我們有創造和發現美的眼睛和思維。
最后
好了，本文到此結束，希望對你有幫助 :)
更多精彩 CSS 技術文章匯總在我的 Github -- iCSS[26] ，持續更新。
參考資料
- [1]快速進行 Grid 布局 - Grid Layoutit:
- https://grid.layoutit.com/
- [2]CodePen Demo -- Grid Layout Demo:
- https://codepen.io/Chokcoco/pen/ExWWevq
- [3]CodePen Demo -- GTA 5 poster ( Grid and Clip Path):
- https://codepen.io/Chokcoco/pen/jOVjxjo
- [4]Olivia Ng:
- https://codepen.io/oliviale
- [5]CodePen Demo -- CSS Grid: Train Ticket:
- https://codepen.io/oliviale/pen/MZZYyO
- [6]使用 CSS column 實現瀑布流布局:
- https://chokcoco.github.io/CSS-Inspiration/#/./layout/masonry-layout-colum
- [7]使用 CSS flex 實現瀑布流布局:
- https://chokcoco.github.io/CSS-Inspiration/#/./layout/masonry-layout-flex
- [8]使用 CSS grid 實現瀑布流布局:
- https://chokcoco.github.io/CSS-Inspiration/#/./layout/masonry-layout-grid
- [9]Can i use -- grid-template-rows: masonry:
- https://caniuse.com/?search=grid-template-rows
- [10]CodePen Demo -- CSS Grid 實現偽瀑布流布局:
- https://codepen.io/Chokcoco/pen/KGXqyo
- [11]CodePen Demo -- grid-template-rows:
- masonry 實現瀑布流布局: https://codepen.io/Chokcoco/pen/NWdBojd
- [12]Multiple-column Layout Properties:
- https://drafts.csswg.org/css-multicol-1/
- [13]CodePen Demo -- CSS multi column Layout Demo:
- https://codepen.io/Chokcoco/pen/PoppVKx
- [14]CodePen Demo -- CSS multi column Layout Demo 2:
- https://codepen.io/Chokcoco/pen/QWpvgqK
- [15]rachelandrew:
- https://codepen.io/rachelandrew
- [16]CodePen Demo -- Smashing Multicol: mixing layout methods -- By rachelandrew:
- https://codepen.io/rachelandrew/pen/aPRjzL
- [17]奇妙的 CSS shapes:
- https://github.com/chokcoco/iCSS/issues/18
- [18]shape-outside:
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside
- [19]CodePen Demo -- FCC: Build a Tribute Page - Michel Thomas by Stephanie:
- https://codepen.io/StuffieStephie/pen/ZLmzKG
- [20]CodePen Demo -- shape-outside: circle Demo:
- https://codepen.io/Chokcoco/pen/LYWyOaa
- [21]CodePen Demo -- shape-outside animation:
- https://codepen.io/Chokcoco/pen/RwpgmaK
- [22]袁川老師:
- https://twitter.com/yuanchuan23
- [23]CodePen Demo -- shape-outside -- Face By yuanchuan:
- https://codepen.io/yuanchuan/pen/xoKMKj
- [24]A CSS Venn Diagram:
- https://adrianroselli.com/2018/12/a-css-venn-diagram.html
- [25]CSS Shapes Experiments:
- https://codepen.io/collection/DYeRBR?cursor=ZD0wJm89MCZwPTEmdj00
- [26]Github -- iCSS:
- https://github.com/chokcoco/iCSS
