如何在顺风中用网格打破行

Question

我使用 Tailwind CSS，附上我的项目图片。在这里，我尝试打破这一行。 我解释说我希望无论第一行的牌有多大，第二行的牌都直接放在下面。 如果我理解正确，我必须为孩子分配类，但孩子来自数据库，因此它们都具有相同的模型组件。我尝试了 row-auto 类，但它不起作用。

Answer 1

我终于找到了一个简单有效的解决方案，如果其他人和我有相同的用例，我会与你分享。

我在父级上使用 Css 属性：columns-count（Tailwind 中的columns-{nb-col}） 在孩子身上，我使用“break-inside”和“avoid-column”值来避免卡片在另一列上溢出（Tailwind 中的 break-inside-avoid-column）

例子：

HTML：

<div class="csscolumn">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

CSS：

.csscolumn {
  column-count: 3;
}

.child {
    break-inside: avoid-colum
}