隐藏列时的CSS Grid动态大小

Question

即使移除其他项目，我也希望某个项目占用剩余空间。

所以目前我有两个列项目，一个菜单在左侧，内容在右侧。

当前我的网格设置如下：

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

菜单占左侧的1fr，内容占其余的4fr。但是，菜单具有Javascript隐藏切换功能，因此当我隐藏菜单时，内容变为1fr，4fr为空。

在隐藏菜单后，如何使内容占据所有剩余空间？我可以使用Javascript，但是纯CSS Grid有办法吗？

Answer 1

如果切换按钮是输入复选框，则可以使用#menu-toggle:checked .grid {}指定新规则。

Answer 2

已解决。

我要做的就是：

grid: 1fr / auto auto;