新時代創意佈局不徹底指南

時間 2021-05-28

標籤 css html 前端 git github 瀏覽器 ide 工具佈局 post 欄目 CSS 简体版

原文原文鏈接

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

CSS 更新之快，只能不斷鞭策本身持續學習，一直呆在溫馨區中，很容易就跟不上節奏。固然，不只僅是 CSS，對於任何技術任何行業也能夠套用這句話。html

迴歸本文的主題 -- 新時代佈局。運用現有的 CSS 技術，咱們是否能夠大膽的跳出常規思惟，再也不侷限於矩形框框一塊一塊，試着更加藝術一些？前端

像是下面這幾個這樣。git

不拘一格的線條：github

文字隨圖片的邊緣排列：瀏覽器

再也不是橫平豎直：ide

又或者造型怪異的網格：工具

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

grid 佈局

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

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

效果以下：

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

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

完整的 Demo 代碼你能夠戳這裏：CodePen Demo -- Smashing Multicol: mixing layout methods -- By rachelandrew