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/（如果屏幕 >= 700px，则触发 3 列）。

我一定是在做傻事，但我找不到区别...

不是:

Answer 1

你要找的是小数单位——把中间那一列设为1fr，意思是当其他两列都是space的时候，它会占剩下的1/1占。它（基本上）像一个带有 flex basis: 0.

的 flexbox flex 单元一样工作

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

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

我已经开始撰写有关网格布局模块工作原理的系列文章，其中有一个 part on sizing grid tracks（可能会有帮助）。 :-)

CSS Grids auto (rest) size doesn't work for me