如何停止列拆分单个元素

Question

我正在尝试使用 css 列和网格来获取可变列 table。我需要这些列是相同的倍数（例如 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 在 label/input/span 周围有：

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

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

如何停止列拆分单个元素

How to stop columns splitting individual elements

html

css

flexbox

css-grid

css-multicolumn-layout