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

Question

我使用 Tailwind CSS，附上我的项目图片。在这里，我尝试打破这一行。我解释说，无论第一行的卡片大小如何，第二行的卡片都直接放在下面。如果我理解正确，我必须将 classes 分配给子项，但子项来自数据库，因此它们都具有相同的模型组件。我尝试了行自动 class，但它不起作用。

Answer 1

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

我使用 Css 属性：parent 上的 columns-count（Tailwind 中的列 - {nb-col}）在 child 上，我使用 '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
}

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

How to break the row with grid in tailwind

css

grid

row

tailwind-css