替代砌体水平或柔性方向 CSS

Alternative to Masonry horizontal or Flex direction CSS?

本文关键字：方向 CSS 水平      更新时间：2023-09-26

我正在寻找一种方法来设计我的网站，有点像这个对我来说鼓舞人心的网站：https://flink.to/

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

我试过了：

  • 砌体水平 （http://isotope.metafizzy.co/layout-modes/masonryhorizontal.html） 但它在响应式中并不真正起作用，因为我们无法以百分比分配宽度和高度......我正在寻找以这种方式显示正方形的解决方案。
  • 带有 Flex 方向的 CSS，但它并不像它可能的那样强大：如果我有三排正方形和一个非常大的正方形，那么更多的小正方形不会填充大方块上方的空白空间。

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

我发现纯CSS和CSS骨架非常简单易用，可用于CSS中的响应式网格。

下面是使用 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>
相关文章：