[[402843]]

依稀記得，某年廣東語文高考作文的相關描述 -- “有時，常識雖易知而難行，有時，常識須推陳而出新”。人的想象力和創造力很容易在對常識的一貫認知中被削弱。

CSS 更新之快，只能不斷鞭策自己持續學習，一直呆在舒適區中，很容易就跟不上節奏。當然，不僅僅是 CSS，對于任何技術任何行業也可以套用這句話。

回歸本文的主題 -- 新時代布局。運用現有的 CSS 技術，我們是否可以大膽的跳出常規思維，不再局限于矩形框框一塊一塊，試著更加藝術一些?

像是下面這幾個這樣。

不拘一格的線條：

CSS Tricks 某時期官網

文字隨圖片的邊緣排列：

不再是橫平豎直：

又或者造型怪異的網格：

[[402845]]

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