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; 

这就是我做到了！他们的例子工作，而我的不！

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

我必须做一些愚蠢的事，但我不能找到差异...

不会吧：

• 因为body为grid
• 因为它是一个iframe
• 由于包装（body）不是固定宽度（既不100%也不900px作品）

Answer 1

您在寻找的是分数单位 - 设置中间列为1fr，这意味着当占其他两列时占用剩余空间的1/1。它的工作原理（基本上）就像一个带有flex basis: 0的flexbox flex单元。

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

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

我已经开始编写关于网格布局模块如何工作的系列，其中有一个part on sizing grid tracks（这可能有帮助）。 :-)