关于前端:新时代创意布局不完全指南

依稀记得，某年广东语文高考作文的相干形容 —“有时，常识虽易知而难行，有时，常识须推陈而出新”。人的想象力和创造力很容易在对常识的一贯认知中被减弱。

CSS 更新之快，只能一直鞭策本人继续学习，始终呆在舒服区中，很容易就跟不上节奏。当然，不仅仅是 CSS，对于任何技术任何行业也能够套用这句话。

回归本文的主题 — 新时代布局。使用现有的 CSS 技术，咱们是否能够大胆的跳出惯例思维，不再局限于矩形框框一块一块，试着更加艺术一些？

像是上面这几个这样。

不拘一格的线条：

文字随图片的边缘排列：

不再是横平竖直：

又或者造型怪异的网格：

是不是很有意思？不拘一格的布局可能给页面吸引更多的眼光和流量，当然这也须要我对 CSS 把握的足够好，能力在无限的属性中发明更多不同的可能性。

说到新时代布局和创意布局，就不得不提到 Grid 的布局。

CSS Grid 布局的二维个性，让咱们相较于传统的 float 布局、定位布局、flex 布局有了对页面更弱小的掌控力。

这里，咱们利用 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 封面，像是这样：

咱们将一个 4×4 的 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 的形式能够实现 伪瀑布流 布局(留神，这里是伪瀑布流)，别离是：

应用 CSS column 实现瀑布流布局
应用 CSS flex 实现瀑布流布局
应用 CSS grid 实现瀑布流布局

你能够点进 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：管制列与列之间的距离，默认为关键字 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，用于设置元素的跨列展现。

咱们首先利用多列布局，实现这样一个相似于报纸排版的布局款式。

<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

OK，进入下一个模块，配角是 shape-outside。

在之前，我也有写过一篇对于 shape-outside 的文章微妙的 CSS shapes，感兴趣的同学也能够先看看。

shape-outside CSS 属性定义了一个能够是非矩形的形态，相邻的内联内容应围绕该形态进行包装。

利用它，咱们就可能很好的实现各种非横平竖直的布局，让布局真正的活起来。

图文排列的交界处，能够是斜的，像是这样：

CodePen Demo — FCC: Build a Tribute Page – Michel Thomas by Stephanie

也能够是蜿蜒的，像是这样：

CodePen Demo — shape-outside: circle Demo

甚至，它是还能够动态变化的不规则容器：

CodePen Demo — shape-outside animation

正当应用，咱们就能够如报纸版发明各种花式布局成果：

不仅如此，袁川老师甚至应用了 shape-outside 进行了一些 CSS 艺术创作，一起观赏一下：

CodePen Demo — shape-outside — Face By yuanchuan

以开篇的这张图为例子：

就是奇妙的使用 shape-outside 的例子，它将整个布局分为了 7 块，每一块别离应用 shape-outside 进行精细化的管制，实际上残缺的布局是这样的：

在这篇文章中，对这个 DEMO 进行了十分具体的论述：A CSS Venn Diagram

如果你也对 shape-outside 感兴趣，在这份收藏夹里，珍藏了 CodePen 上十分多精良的 shape-outside 布局 DEMO，无妨一看学习学习 — CSS Shapes Experiments

在明天，实现有创意的布局也须要咱们把握更多的 CSS 属性与技巧，本文粗略的介绍了几种在明天实现创意布局的无益属性：

Grid 布局全家桶以及利用 Grid 实现瀑布流布局
多栏布局 multiple-column 及多栏布局嵌套其余布局
shape-outside 的各种利用
在上述布局中交叉应用 clip-path、transform 等属性以加强各种布局

当然，CSS 能实现的远不止如此，像是滚动视差、3D 变换等等都是能够利用 CSS 实现并且再交融进布局当中的属性。当然这也须要咱们有发明和发现美的眼睛和思维。

好了，本文到此结束，心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

关于前端:新时代创意布局不完全指南

grid 布局

利用 Grid 布局，切割页面进行分块

利用 Grid 布局配合 clip-path 实现 GTA5 封面

瀑布流布局

应用 `grid-template-rows: masonry` 实现程度方向排布的瀑布流布局

多栏布局

column-gap 管制间距 & column-rule 管制列与列间款式

column-span 设置跨列

多栏布局搭配其余布局实现更简单的布局

shape-outside 让布局插上设想的翅膀

总结一下

最初

Just My Socks（注册教程内含优惠码）

关于前端:新时代创意布局不完全指南

grid 布局

利用 Grid 布局，切割页面进行分块

利用 Grid 布局配合 clip-path 实现 GTA5 封面

瀑布流布局

应用 grid-template-rows: masonry 实现程度方向排布的瀑布流布局

多栏布局

column-gap 管制间距 & column-rule 管制列与列间款式

column-span 设置跨列

多栏布局搭配其余布局实现更简单的布局

shape-outside 让布局插上设想的翅膀

总结一下

最初

Just My Socks（注册教程 内含优惠码）

应用 `grid-template-rows: masonry` 实现程度方向排布的瀑布流布局

Just My Socks（注册教程内含优惠码）