如何停止列拆分单个元素答案

【问题标题】：How to stop columns splitting individual elements如何停止列拆分单个元素
【发布时间】：2019-01-23 11:21:13
【问题描述】：

我正在尝试使用 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;
}

【问题讨论】：

在您想防止拆分的字段中尝试white-space:nowrap
列设置为在任何地方拆分，以便创建均匀的列高，如果您不希望这样做，请使用类似 flex 的东西来控制列拆分的位置
它应该将文本水平分成两半？输入框？图片？

标签： html css flexbox css-grid css-multicolumn-layout

【解决方案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 行），到目前为止这还不是问题。
代码笔：
https://codepen.io/j1dopeman/pen/gQWdvg

【讨论】：