CSS 网格自动(静止)大小对我不起作用

Question

我正在研究 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;

我就是这么做的!他们的示例有效，而我的示例无效!？

我的示例 fiddle :http://jsfiddle.net/rudiedirkx/w5xho67w/3/ (如果屏幕 >= 700 像素，则触发 3 列)。

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

不是:

• 因为body是grid
• 因为它是一个 iframe
• 因为包装器 (body) 的宽度不是固定的(100% 和 900px 都不起作用)

Answer 1

您要查找的是小数单位——将中间列设置为 1fr，这意味着当考虑到其他两列时，它将占用剩余空间的 1/1。它(基本上)像一个带有 flex basis: 0 的 flexbox flex unit 一样工作。

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

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

我已经开始写关于网格布局模块如何工作的系列文章，有一个 part on sizing grid tracks (这可能有帮助)在那里。 :-)