CSS Grid布局中空侧边栏如何移除占位，实现主内容区自适应撑满

场景 #

已完成侧边栏+主内容区的Grid双栏布局，需求为：当侧边栏元素为空时，自动移除该元素的布局占位，使主内容区占满容器全宽。

初始代码 #

• 布局CSS

.grid-container {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: 'sidebar main-content';
  min-height: calc(100vh - 56px);
}

.sidebar {
  grid-area: sidebar;
  width: 100%;
  height: 100%;
}

.main-content {
  grid-area: main-content;
}

.grid-container > .sidebar:empty {
  background-color: red;
}

• HTML结构

<div className='grid-container'>
  <div className='sidebar'>
    <Sidebar />
  </div>
  <div className='main-content'>
    <div>Test</div>
  </div>
</div>

原有实现瓶颈 #

可以通过:empty选择器匹配到空状态的侧边栏，但受限于CSS无法选中元素的父级节点，无法直接修改网格容器的列模板配置，不能直接通过调整grid-template-columns实现占位移除。

最终方案 #

调整思路：将侧边栏宽度的控制权从网格容器列模板转移到侧边栏自身，利用auto列的自适应特性实现占位自动收缩。
调整后有效CSS代码：

.grid-container {
  display: grid;
  /* 第一列设为auto，宽度自动跟随子元素变化 */
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: 'sidebar main-content';
  min-height: calc(100vh - 56px);
}

.sidebar {
  grid-area: sidebar;
  /* 原本写在列模板的固定宽度移至侧边栏自身 */
  width: 250px;
  height: 100%;
}

.main-content {
  grid-area: main-content;
}

/* 空状态下侧边栏宽度设为0，auto列会自动收缩消除占位 */
.sidebar:empty {
  width: 0;
}

内容的提问来源于stack exchange，提问作者Paneer Handi