1

我正在研究 CSS 网格，我遇到了一些奇怪的事情。我想要 3 列：1 和 3 是150px宽的，2 是其余的。这应该是可能的，我想，但这不起作用：

grid-template-columns: 150px auto 150px;

所以我尝试了这个，并且确实有效，但是很愚蠢：

grid-template-columns: 150px calc(100% - 300px) 150px;

然后我遇到了这个例子： http: //gridbyexample.com/examples/code/layout1.html它使用它来使内容列自动调整大小：

grid-template-columns: 200px 40px auto 40px 200px;

这就是我所做的！他们的例子有效，而我的没有！？

我的示例小提琴： http: //jsfiddle.net/rudiedirkx/w5xho67w/3/（如果屏幕> = 700px，则触发3列）。

我一定是在做一些愚蠢的事情，但我找不到区别......

不是：

  • 因为body是grid
  • 因为它是一个 iframe
  • 因为包装器 ( body) 不是固定宽度（既不工作100%也不900px工作）
4

1 回答 1

1

您正在寻找的是小数单位 - 将中间列设置为1fr，这意味着当考虑其他两列时它将占用剩余空间的 1/1。它（基本上）像一个带有flex basis: 0.

grid-template-columns: 150px 1fr 150px;

相比之下，该auto值将根据内容调整大小，因此空的中间列（例如）不会占用任何空间。

我已经开始编写关于网格布局模块如何工作的系列文章，其中有一部分是关于调整网格轨道的大小（这可能会有所帮助）。:-)

于 2015-10-18T15:54:12.583 回答