新時(shí)代創(chuàng)意布局不完全指南

依稀記得，某年廣東語(yǔ)文高考作文的相關(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è)這樣。

不拘一格的線條：

文字隨圖片的邊緣排列：

不再是橫平豎直：

又或者造型怪異的網(wǎng)格：

是不是很有意思？不拘一格的布局能夠給頁(yè)面吸引更多的目光和流量，當(dāng)然這也需要我對(duì) CSS 掌握的足夠好，才能在有限的屬性中創(chuàng)造更多不同的可能性。

Grid 布局

說(shuō)到新時(shí)代布局和創(chuàng)意布局，就不得不提到 Grid 的布局。

CSS Grid 布局的二維特性，讓我們相較于傳統(tǒng)的float布局、定位布局、flex 布局有了對(duì)頁(yè)面更強(qiáng)大的掌控力。

利用 Grid 布局，切割頁(yè)面進(jìn)行分塊

這里，我們利用 Grid 布局的特性，可以將頁(yè)面按照我們的所想任意切割成不同的塊狀區(qū)域。

這里推薦一些能夠方便我們進(jìn)行 Grid 布局的工具：

• 快速進(jìn)行 Grid 布局 - Grid Layoutit^[1]

利用這個(gè)工具，可以快速創(chuàng)建得到自己想要 Grid 布局，并且拿到對(duì)應(yīng)的 CSS，非常的簡(jiǎn)單便捷。

這里我利用工具，將頁(yè)面切割成了 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ò)程中非常好的幫手，它非常適合各種不規(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)則是無(wú)法自動(dòng)適配不同的高度，需要手動(dòng)指定每一個(gè)元素區(qū)塊大小

而在未來(lái)，標(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 布局。在之前，我們通過(guò) grid 布局，通過(guò)精細(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;
    }
}

效果如下：

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;
}

通過(guò) column-count: 3 指定 3 欄。

column-gap 控制間距 &  column-rule 控制列與列間樣式

接下來(lái)，我們?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)：

通過(guò)給 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 就無(wú)法實(shí)現(xiàn)了。

但是，通過(guò)嵌套其他布局，我們可以巧妙的對(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>

通過(guò)一個(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ò)一篇關(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)各種非橫平豎直的布局，讓布局真正的活起來(lái)。

圖文排列的交界處，可以是斜的，像是這樣：

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ù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。

如果還有什么疑問(wèn)或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬(wàn)望告知。

參考資料