Размер сетки 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/ (три столбца триггера, если экран> = 700 пикселей).

я должен делать что-то глупое, но я не могу найти разницу ...

Не это:

• Поскольку body является grid
• Потому что это IFrame
• Поскольку обертка (body) не имеет фиксированной ширины (ни 100%, ни 900px работ)

Answer 1

То, что вы ищете, это дробные единицы - установите средний столбец 1fr, а это означает, что он займет 1/1 оставшегося пространства при учете двух других столбцов. Он работает (в основном), как гибкий блок flexbox с flex basis: 0.

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

В отличие от этого, значение auto будет размер в соответствии с содержанием, так что пустой средний столбец (например) не занимает никакого места.

Я начал писать серию о том, как работает модуль макета сетки, там есть part on sizing grid tracks (что может быть полезно). :-)