CSS Grid布局中如何实现侧边栏收缩时主内容区自动填充剩余宽度？

嗨，我看了你的代码，马上就找到问题所在啦！你当前的Grid布局里，grid-template-columns 是固定写死的 200px 1fr，这意味着第一列（侧边栏所在的列）始终会占据200px的空间——哪怕你把侧边栏自身的宽度改成50px，Grid还是会给它留足200px的位置，剩下的150px就空在那儿了，主内容区自然没法填满整个屏幕。

我给你两个简单的解决思路，选哪个都能搞定：

方法一：让Grid列自适应侧边栏宽度（最省心） #

这个方法不用改JS，只需要调整两行CSS就行：

1. 把.container的grid-template-columns里的固定200px改成auto，让Grid第一列自动适配侧边栏的实际宽度：

.container {
    display: grid;
    grid-template-columns: auto minmax(0,1fr); /* 第一列随侧边栏宽度变化，主内容占剩余空间 */
    height: 100%;
    grid-template-rows: 1fr;
}

2. 给.sidebar加上默认宽度（原来的Grid列宽是200px，现在让侧边栏自己控制这个宽度）：

.sidebar {
    background-color: #333;
    color: white;
    padding: 15px;
    overflow: hidden;
    transition: width 0.3s ease-in-out;
    width: 200px; /* 默认占200px宽度 */
}

这样当你点击按钮切换shrink类时，侧边栏宽度变成50px，Grid的第一列也会跟着收缩到50px，主内容区就自动填满剩下的空间了，完美！

方法二：通过切换容器类精确控制Grid列宽 #

如果你想更精准地控制Grid的列宽数值，也可以给容器加个对应的类，在JS里同时切换侧边栏和容器的样式：

1. 先修改JavaScript代码，同时操作侧边栏和容器的类：

function toggleSidebar() {
    const sidebar = document.querySelector('.sidebar');
    const container = document.querySelector('.container');
    sidebar.classList.toggle('shrink');
    container.classList.toggle('sidebar-shrunk');
}

2. 然后给容器添加收缩状态的Grid列宽样式，顺便给容器加个过渡动画让变化更丝滑：

.container {
    display: grid;
    grid-template-columns: 200px minmax(0,1fr);
    height: 100%;
    grid-template-rows: 1fr;
    transition: grid-template-columns 0.3s ease-in-out; /* 给Grid列宽加过渡效果 */
}

.container.sidebar-shrunk {
    grid-template-columns: 50px minmax(0,1fr); /* 侧边栏收缩时，Grid第一列改成50px */
}

另外提一句：你原来给.main-content加的transition: margin-left 0.3s其实是没用的，因为Grid布局里主内容区的位置是由Grid列控制的，不是margin-left，删掉这个样式就好啦~

备注：内容来源于stack exchange，提问作者Velugoti Venkateswarlu