Javascript 隐藏列时CSS网格的动态大小

我希望某个项目占用剩余空间，即使其他项目被删除

现在我有两个栏目，一个菜单在左边，一个内容在右边

当前我的网格设置如下所示：

.grid{
显示：网格；
网格：1fr/1fr 4fr；
}

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

---

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

如果切换按钮是一个输入复选框，你可以使用

#menu toggle:checked.Grid{}

来指定新规则。

如果切换按钮是一个输入复选框，你可以使用

#menu toggle:checked.Grid{}

来指定新规则。

我所要做的就是：

grid:1fr/auto；

已解决

我所要做的就是：

grid:1fr/auto；