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

Question

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

因此，目前我有两个列项目，一个菜单在左边，内容在右边。

目前我的网格设置如下：

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

菜单占据了左边的1fr，内容占据了剩下的4fr。然而，菜单有一个Javascript隐藏切换功能，所以当我隐藏菜单时，内容变为1fr，4fr为空。

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

Answer 1

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

Answer 2

解决了。

我要做的就是：

grid: 1fr / auto auto;