CodePen 上的一些非常巧妙的布局笔（带有额外花样）

尼古拉斯·J·恩格勒的子弹日记

CSS 网格让这个日历成为一个完美的简单用例！而赋予不同元素倾斜的变换则赋予了它生命力。

喜欢那个被标记掉的单元格外观。仔细看看，它完全是 CSS 加上了重复渐变的效果：

.cell.x {
  background-image: 
    repeating-linear-gradient(
      -45deg, 
      transparent, transparent 3px, 
      #e53a40 3px, #e53a40 6px
    );
}

Erin E. Sullivan 的书籍布局

你可能认为必须手动将内容切分成两个不同的元素才能实现像这样的并排布局，从而保持内容的流畅性。但其实不然！Erin 在这里使用了CSS 列，因此浏览器可以自然地进行拆分和流动。

您可能想跳转到“全页视图”来查看这个：

这里还有更多巧妙之处，比如所有受手写启发的下划线、高亮和 stet。正是背景数据 URL SVG 实现了这些下划线！

.open-book a {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiP…gsNDMuOCw0MzIuNCw0Ni41LDQzMC45LDQ5LjJ6Ii8+DQoJCTwvZz4NCgk8L2c+DQo8L3N2Zz4=) bottom repeat-x;
}

Luke Jacksonn 的 Flexbox Masonry

除了灵活性之外，弹性盒子还能在多个方向上设置，并且可以换行。将所有这些想法融合在一起，可以创造出有趣的灵活布局，如下所示：

这个技巧中很酷的一点是，那些原本为空的 flex 元素可以通过在 viewBox 指定比例的位置放置 SVG 元素来保持其纵横比大小：

<div><svg width="320px" viewBox="0 0 2 1"></svg></div>
<div><svg width="320px" viewBox="0 0 1 1"></svg></div>

通常情况下，Masonry 会处理看起来像是垂直交错的列，但内容通常仍然按照源顺序从左到右排列。Masonry 库在这方面做得很好：

奥利维亚的彩妆盘

你知道 flexbox 和 grid 可以完美地协同工作吗？任何网格单元都可以成为 flex 容器。但反过来也一样，一个 flex 元素也可以成为网格容器！这就是这里发生的事情：

这里的整体布局是弹性盒子，但各个颜色部分（巧妙地通过 3D 变换打开）下方有一个网格布局。此外，每个部分都有略微不同的网格设置，这真是个巧妙的设计。

看看周围！

我曾经为了好玩，尝试过自己复制杂志的版面。有很多东西值得探索！