使用CSS网格自动调整列

Question

我试图弄清楚CSS网格是否能够表现得像桌子一样。

所以，如果我有一个很长的＆＃34;细胞数据＆＃34; （第2栏）并且桌子上的其他地方有空间，我不希望它像下图所示那样包装：

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

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

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我对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: 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>

此处有更多详情：The difference between percentage and fr units in CSS Grid Layout

Answer 2

当我停止思考时，答案变得非常简单。问题回答了，您可以使用direct作为col宽度而不是百分比或分数。

尝试auto

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

哦，格格，有什么你不能做的吗？