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（這可能有幫助）。 :-)