如何使用砖石布局和小部件的特定顺序来响应小部件页面？

Question

我希望能够渲染不同高度的小部件（盒子，从这里开始），但对于特定的位置，它们会根据页面数据而变化（应该渲染哪些盒子，以及哪个顺序+高度可以不同）

我不想在盒子之间或盒子内有任何不必要的空间。这是最难的部分！因为如果将盒子按行放置，则行的高度是固定的（通常是该行中最高项目的高度）。

以下是我想要实现的两个示例：

和

示例 1 和示例 2

注意盒子上的不同高度，以及第 1 列如何只有 box-1。

我知道可以做到这一点的唯一方法是有两列（左列和右列），然后 Flexbox 渲染每列中的框。很好。

但是，问题来了：

在较小的屏幕尺寸（移动设备）上，我只想要一列。我希望这些框位于同一列中，以便我可以安排它们的顺序。例如这样：

示例3

注意 box-3 是如何被推到顶部的。

我已经尝试过的

我一直在尝试根据断点完全不同的渲染，但这会使框在更改窗口宽度时重新渲染，这并不理想，因为这会让它们闪烁甚至重新获取数据。

• pureCSS：css-grid，不适用于通常的行，因为它是固定的高度。可以使用两个严格的列，然后每个框内都有自己的行，以便在其中灵活渲染。但这在进入移动视图（1 列）时需要重新渲染框，因为排序不起作用（框 1 与框 2-3-4 分开）

• pureCSS：Flexbox，还需要两个单独的 Flexbox 容器（每一列一个），这不会订购项目

• masonry：唯一的问题是不让我订购物品！并且用 box-2 填充第一列（参见示例）。否则效果很好。

• react-grid-layout：效果很好，但是，盒子的动态高度有问题。假设数据很大，那么小部件/组件的高度就会被卡住。

我正在使用react，如果这很重要的话。如果有一种方法可以渲染同一个盒子但在 dom 的不同位置（从而不让它们重新渲染），也许我可以有两个不同的渲染（桌面 2 列/移动 1 列）？

非常感谢任何有助于更好地理解这个问题的帮助，谢谢。

Answer 1

CSS 列将是实现这一目标的简单方法。即使第一个元素下方仍然有可用空间，也可以使用

break-before: column

:

轻松实现将第二个元素插入第二列

ul {
  columns: 2
}

li {
  width: 50px;
  height: 50px;
  outline: 1px dashed red;
}

li:nth-child(2) {
  break-before: column;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

要使其在移动设备上看起来有所不同，请使用

flex

代替，这样您就可以使用

order

将元素 #3 移到前面。