Question

我正在尝试使用CSS列和网格来获取可变列表。我需要将列设置为相同的倍数（例如3、6、9）。但是，对于chrome，它会在标签，输入，跨度等元素的中间拆分。我不能在不同的列中放置一半标签或输入。 Display：inline-block似乎不起作用-我猜是因为它在网格内。似乎flexbox不适用于列。有没有简单的方法可以做到这一点？示例：

https://codepen.io/j1dopeman/pen/EpBvmR

在Firefox上效果不错，但在chrome中分割了文本。

<div class="container">
  <div class="grid">
    <label>ygygjj</label>
    <input type='number' />
    <span>ygygjj</span>
    ... a bunch of times
  </div>
</div>


.container {
  columns: 3 300px;
}

.grid {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Answer 1

我最终摆脱了CSS列，并在一个网格内创建了一个网格。容器div具有：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(33em, 1fr));
}

里面是div在标签/输入/跨度周围，

.row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

除非分辨率变得很小，否则似乎效果很好。它永远不会少于3列（1行），这到目前为止还不是问题。
Codepen：
https://codepen.io/j1dopeman/pen/gQWdvg

如何停止列拆分单个元素

1 个答案: