Динамический размер CSS Grid при скрытии столбцов

Question

Я хочу, чтобы определенный элемент занимал оставшееся пространство, даже когда другие элементы удалены.

Итак, в настоящее время у меня есть два элемента столбца, одно меню слева и содержимое справа.

В настоящее время мои настройки сетки имеют вид:

.grid {
    display: grid;
    grid: 1fr / 1fr 4fr;
}

Меню занимает 1 кадр слева, а содержимое занимает оставшиеся 4 кадра.Однако в меню есть функция переключения Javascript Hide, поэтому, когда я скрываю меню, содержимое становится 1fr, а 4fr пустым.

Как сделать так, чтобы содержимое занимало все оставшееся пространство после скрытия меню?Я могу сделать это с Javascript, но есть ли способ с чистым CSS Grid?

Answer 1

Решено.

Все, что мне нужно было сделать:

grid: 1fr / auto auto;

Answer 2

Если кнопка переключения является флажком ввода, вы можете использовать #menu-toggle:checked .grid {} для указания новых правил.