使用 CSS 网格自动调整列

Question

我正在尝试确定 CSS 网格是否能够表现得像 table。

因此，如果我有一段很长的 "cell data"（第 2 栏）并且 table 中的其他地方有 space，我不希望它像现在这样包装在下图中：

我想达到的效果是这样的。内容较长的列增长，其他列根据该列中的内容缩小。

我已经在 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%;
}

...设置固定宽度，让每一列都可用 space:

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

然后，防止文本换行：

.box { white-space: nowrap; }

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: #fff;
  color: #444;
  max-width: 800px;
}

.box {
  white-space: nowrap;
  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>

此处有更多详细信息：

Answer 2

当我停止思考时，答案原来很简单。问题自己回答了，您可以使用 auto 作为 col 宽度而不是百分比或分数。

尝试grid-template-columns: repeat(3, auto);

参见：https://codepen.io/anon/pen/baGKYb（在 chrome 中测试）

哦格子，有什么是你不会做的吗？

使用 CSS 网格自动调整列

Auto-adjusting columns with CSS grid

html

css

css-grid