使用CSS网格自动调整列宽

Question

使用CSS网格自动调整列宽

5

我正在尝试确定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网格非常陌生，所以我很好奇这是否可能。

任何帮助都将不胜感激。先行致谢！

- realph

2

我正在为您进行研究，但是一件可能会对您有帮助的事情是将33.33％替换为1fr - 这个fr单位将自由空间分配给使用它的列。例如，1fr 2fr将分配1/3给第一列，2/3给第二列。 - Niet the Dark Absol

3

未来的读者请注意，如果数据是表格形式的，您应该将其放入实际的表格中。这会帮助搜索引擎和屏幕阅读器。 - René

2个回答

2

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

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

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

哦，网格布局，有什么事情是你做不到的吗？

- René

如果所有列都可以根据内容宽度自动调整，那么你的答案是正确的。但是，如果除了文本较长的列之外，所有列应该具有相同的宽度，那么你的答案就不适用了，这时候分数单位就派上用场了。 - Michael Benjamin

关于你的问题，也许你可以自己解决： - Michael Benjamin

@Michael_B 在这个具体的问题中，允许其他列缩小而不指定其他列相同。要求这样做似乎是不合理的，因为每一列都可以有较长或较短的文本。如果需要，您可以使用 minmax(300px, auto) 或类似的方法。此外，如果您知道数据，仍然可以将1列设置为自动。 - René

关于您链接的问题，我猜网格布局并不能解决所有问题。虽然第二个问题中的巨大跨度hack似乎在最新版本的Firefox中可以工作（当然这不是理想的，但只要您不为剩余行定义固定高度，它就有意义）。对于第一个问题，如果它不仅仅是理论上的，您可能已经有了一些非网格布局的解决方案或js hackfix。 - René

1

我同意。常规的生产网站应该只使用规范中预期的内容，这样如果更新后出现问题，就可以归咎于浏览器 ;) 只有在旧技巧的情况下才能使用它们，但这并不适用于任何css3。（还没有在任何生产网站上使用过网格..需要先了解所有的怪癖和错误） - René

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

不要将列设置为33％，请尝试使用CSS Flexbox布局。

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

更多详情请查看：CSS Grid布局中百分比和fr单位的区别