新時代創意佈局不完全指南

ChokCoco發表於2021-05-27

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

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

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

像是下面這幾個這樣。

不拘一格的線條：

文字隨圖片的邊緣排列：

不再是橫平豎直：

又或者造型怪異的網格：

是不是很有意思？不拘一格的佈局能夠給頁面吸引更多的目光和流量，當然這也需要我對 CSS 掌握的足夠好，才能在有限的屬性中創造更多不同的可能性。

grid 佈局

說到新時代佈局和創意佈局，就不得不提到 Grid 的佈局。

CSS Grid 佈局的二維特性，讓我們相較於傳統的float佈局、定位佈局、flex 佈局有了對頁面更強大的掌控力。

利用 Grid 佈局，切割頁面進行分塊

這裡，我們利用 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 封面

這裡，我們可以利用 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 的方式可以實現偽瀑布流佈局(注意，這裡是偽瀑布流)，分別是：

你可以點進 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

正常而言，我們想要實現瀑布流佈局還是需要花費一定的功夫的，即便是基於 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 實現偽瀑布流佈局

在上述 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 實現瀑布流佈局

多欄佈局

多欄佈局也屬於現在我們能夠掌控的佈局之一，利用 CSS 較為新的特性 Multiple-column Layout Properties。

最簡單的多欄佈局，我們只需要用到 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

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

多欄佈局搭配其他佈局實現更復雜的佈局

當然，column-span 有個缺陷，就是它的取值只有 column-span: all 或者是 column-span: none，也就是要麼橫跨所有的列，要麼不跨列。

如果現在我有一個 3 列布局，但是隻希望其中的標題橫跨兩列，column-span: all 就無法實現了。

但是，通過巢狀其他佈局，我們可以巧妙的對多列布局再進行昇華，譬如 rachelandrew 就實現了這樣一種巢狀佈局：

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

這樣，我們就能實現視覺上的橫跨任意列的標題：