仅用CSS Grid实现无aside时main自动撑满全宽

• 原有代码的核心错误：显式写死2列网格轨道，显式轨道无论是否有对应子元素都会强制存在，导致aside被移除后，空轨道仍然占用宽度，main无法撑满容器。

实现代码 #

CSS部分：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 2rem;
}

div.root {
  height: 100%;
  background-color: blueviolet;
  display: grid;
  /* 默认单列，main自动撑满全宽 */
  grid-template-columns: 1fr;
}

/* 检测到root直接包含aside时，动态切换为两列布局 */
div.root:has(> aside) {
  grid-template-columns: 200px 1fr;
}

aside {
  background-color: aquamarine;
}

main {
  background-color: burlywood;
}

HTML部分（两种场景通用）：

<!-- 存在aside时，自动触发两列布局 -->
<div class="root">
  <aside> aside </aside>
  <main> main </main>
</div>

<!-- 移除/注释aside时，自动回到单列布局，main撑满全宽 -->
<!-- <div class="root">
  <main> main </main>
</div> -->

效果说明 #

• 当aside存在时，网格自动切换为200px 1fr两列布局，aside占固定200px宽度，main占满剩余空间。
• 当aside被移除/注释时，网格回到默认单列1fr布局，main自动撑满容器全部宽度。
• 兼容性说明：:has() 已在Chrome 105+、Safari 15.4+、Firefox 121+等现代浏览器中支持，生产环境可正常使用。

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