Можно ли сделать разной ширину блока на CSS Grid в зависимости от другого блока?

Question

[Muvka]

Есть grid строка, в ней 2 колонки. Нужно сделать так, чтобы если в строке 2 элемента, то каждый занимал свою ячейку, а если только один, то этот блок растягивался на всю ширину. Есть возможность такое реализовать средствами grid? Или такое возможно реализовать только таким селектором: .catalog__filter-price + .catalog__event-cats? Просто это немного на костыль похоже)

Comments

[shmatuan]

Можно на флексах https://codepen.io/andreysh/pen/vbBpBE

[Muvka]

На флексах я знаю, что можно. Хочется на гридах. Получилось только так. Но все-равно это не выход.

.catalog__event-cats {
   grid-column: span 2;
}

.catalog__filter-price + .catalog__event-cats {
   grid-column: span 1;
}