Как правильно скрыть блоки в GRID?

Question

[jack iakovenko]

помогите пожалуйста !! есть секция в которой есть 2 блока,фильтры и каталог
секцие задан :

display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: 60px;

а блокама:
фильтрам
grid-columns: 3 span;
каталогу:
grid-columns: 9 span;
так вот при нажатии на кнопку скрыть фильтры
блок фильты скрывался а блок каталог становился grid-columns: 12 span;
и как добвать всему этому процессу transition?
вот сам код
https://codepen.io/jackyiakovenko/pen/VwXVExw

Comments

[Ankhena]

У секции 2 столбца, внутри один блок занимает из них 3, а другой 9?
Сильная математика ))

Свойство grid-column пишется так, без s на конце.

[Ankhena]

Так, гридами не выйдет.
Вы можете оперировать шириной и overflow.
Ширину колонок при этом задавать по контенту.

[ES-Good]

Ankhena, а шо не так с математикой?Стандартная 12-ти колоночная сетка

[Ankhena]

ES-Good, в стандартной 12-ти колоночной сетке 12 столбцов, а не 2, как у автора.
Не, грид, конечно, дорисует недостающие 10, но тогда проще вообще не указывать их количество, чем так.

[ES-Good]

Так их два и они занимают ширину 12ти колонок, вы знакомы с будстрапом? А то я не совсем понимаю о чем вы говорите