乐趣区

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

jiezi

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

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 封面，像是这样：

咱们将一个 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 和 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

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

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 订阅珍藏。

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

退出移动版