如何在 2 列中动态构建内容

Posted 2023-03-07

【中文标题】如何在 2 列中动态构建内容

【英文标题】：How to structure content dynamically in 2 columns

【发布时间】：2021-03-31 02:59:59

【问题描述】：

我试图动态地将一些帖子内容放入 2 列中，但我找不到正确的方法，你能帮帮我吗？

这是我想要做的事情

Expectation

我尝试过网格，但它创建了行，并且由于网格行放置而以这种方式结束，我不能使用网格区域，因为这应该是动态内容，所以我不知道他们什么时候会变大或变小

Reality

【问题讨论】：

你能展示一些你尝试过的代码吗？您可能还想寻找现有的解决方案。也许是这样的？ npmjs.com/package/react-stack-grid#live-demo

【参考方案1】：

在这种情况下，您可以尝试使用 flexbox 布局。

    display: flex

要将内容分为两列，您可以使用

flex-direction: row
column-gap: 12px (whatever is your requirement)

并且要在每一列中对齐堆栈中的项目，您可以使用

flex-direction: column
row-gap: 12px 

您可以查看其他 flexbox 布局 css 以根据您的需要进行自定义。