javascript - 隐藏列时的 CSS Grid 动态大小

Question

即使其他元素被删除，我也希望某个元素占用剩余空间。

所以目前我有两个列元素，一个菜单在左边，内容在右边。

目前我的网格设置是这样的:

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

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

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

Answer 1

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