javascript - 替代 Masonry 水平或 Flex 方向 CSS？

Question

我正在寻找一种方法来设计我的网站，有点像这个给我灵感的网站:https://flink.to/

我的研究更多是关于文章在两种不同大小的马赛克正方形中的显示方式。

我试过了:

• Masonry horizo​​ntal ( http://isotope.metafizzy.co/layout-modes/masonryhorizontal.html ) 但它在响应式中并没有真正起作用，因为我们无法以百分比形式分配宽度和高度...我正在寻找以这种方式显示正方形的解决方案。
• 具有 Flex 方向的 CSS，但它并没有想象中的那么强大:如果我有三排正方形和一个非常大的正方形，更多的小正方形不会填充大正方形上方的空白空间。

我怎样才能以最好的方式复制它？

Answer 1

我找到了 Pure CSS和 CSS Skeleton真正简单易用的 CSS 响应式网格库。

Here是使用 pure.css 的类似布局的示例

在纯 CSS 中，网格的布局如下:

<div class="pure-g">
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
</div>

在 CSS 骨架中是这样的:

<div class="container">

  <div class="row">
    <div class="one-third column">1/3</div>
    <div class="two-thirds column">2/3</div>
  </div>

  <div class="row">
    <div class="one-half column">1/2</div>
    <div class="one-half column">1/2</div>
  </div>

</div>