html - CSS：自组织弹性项目

Question

我有问题。我目前正在这里构建一个这样的仪表板https://demos.creative-tim.com/material-dashboard/examples/dashboard.html。目前我有这个 HTML 结构：

<div class="content">
    <section></section>
    <section></section>
    <section></section>
    <section></section>
</div>

我现在想做的是找到一种在 flex 中获得 2 列布局的方法，以便项目不只是在彼此下方。问题是，我的部分项目不是静态的，它们是动态的并且对于特定的用户角色是不同的。他们也有不同的高度。

那么有没有办法解决这个问题？也许有一种方法可以让这些部分自行排序？

当屏幕尺寸大于 1300 像素时，计划是应用 2 列布局：

@media (min-width: 1300px) {
    ...
}

那么有没有人知道我如何完成这项工作？

标签： htmlcss

Answer 1

看看这个：https ://codepen.io/pen/oNvwKRv

.layout {
    column-count: 2;
    padding: 20px;
    /*Spacing between items*/
    font-size: 20px;
}

.item {
    break-inside: avoid;
    margin-top: 1em;
}

.item:first-child {
    margin-top: 0;
}