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

本文轉載自查看原文 2021-05-27 10:39 2871 html/ css/ javascript/ CSS進階

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

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

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