隐藏列时的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;