CSS Grid设置grid-template-areas后未按指定单行模板排布问题

布局失效的核心原因是**grid-template-areas的命名不符合CSS语法规范**：
CSS规定网格区域名称必须是合法的自定义标识符，不能使用纯数字，也不能以数字开头。你代码中直接使用1、2作为区域名，浏览器会将这部分CSS规则判定为无效值直接忽略，最终网格按默认自动布局规则渲染，块级元素默认各占整行，就出现了上下堆叠的效果。

将纯数字的区域名替换为合法的自定义名称即可，参考代码如下：

.container {
  display: grid;
  /* 替换为合法命名，定义第一行布局：侧边栏占1列，内容区占2列 */
  grid-template-areas: "sidebar content content";
  /* 匹配区域占比设置列宽，侧边栏1份宽度，内容区2份宽度 */
  grid-template-columns: 1fr 2fr;
}

.sidebar {
  background-color: aqua;
  grid-area: sidebar;
  height: 50vh;
}

.content {
  background-color: black;
  grid-area: content;
  height: 50vh;
}

对应的HTML结构无需修改，保持原有写法即可：

<div class="container">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>

如果不想显式命名网格区域，也可以直接通过grid-column属性指定子项占据的列范围，实现同等效果：

.container {
  display: grid;
  /* 直接定义3列等宽，适配1:2的占比需求 */
  grid-template-columns: 1fr 1fr 1fr;
}

.sidebar {
  background-color: aqua;
  height: 50vh;
  /* 占据第1列 */
  grid-column: 1;
}

.content {
  background-color: black;
  height: 50vh;
  /* 占据第2到第3列 */
  grid-column: 2 / span 2;
}

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