使用 CSS 网格自动调整列

Question

我正在尝试弄清楚 CSS 网格是否能够像表格一样运行。

因此，如果我有很长的“单元格数据”（第 2 列），并且表中其他地方有可用空间，我不希望它像下图中那样换行：

我想要实现的就是这样的事情。具有较长内容的列会增长，而其他列会根据该列中的内容而缩小。

我在 CodePen 上上传了一个示例： https: //codepen.io/anon/pen/WdNJdY

.wrapper {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  background-color: #fff;
  color: #444;
  max-width: 800px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

<div class="wrapper">
  <div class="box a">col 1</div>
  <div class="box b">col 2</div>
  <div class="box c">col 3</div>
  <div class="box d">short data</div>
  <div class="box e">a really long piece of data</div>
  <div class="box f">short data</div>
</div>

我对 CSS 网格非常陌生，所以我很好奇这是否可能。

任何帮助表示赞赏。提前致谢！

Answer 1

而不是将列设置为 33%...

.wrapper {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
}

...设置固定宽度，让每列使用可用空间：

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

然后，防止文本换行：

.box { white-space: nowrap; }

.wrapper {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
}

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

更多详细信息请参见：CSS 网格布局中百分比和 fr 单位之间的差异