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