为何我的grid-template指令生成行而非列？CSS Grid布局问题

我正在学习CSS Grid布局，想要实现标准的圣杯布局（头部通栏、左右侧边栏+中间主内容、底部通栏），但当前实现的效果不符合预期。

我的代码 #

CSS 代码

html {
  width: 100%;                 /* 100% width of parent (root) element */
  height: 100vh;                   /* 100% height of viewport */
  background: rgb(0, 0, 0, 0.1); /* 10% opacity black (very light gray) */
  font-size: 1.0em;                /* root font size */
  font-family: Arial, sans-serif;
}
body {
  margin: 0;                  /* No margin at edge of content */
  height: 100%;               /* 100% height of parent (html) element */
  padding: 0;
}

.header {
  font-size: 1.5rem;
  background-color: #4c7d7e;
  color: white;
  grid-area: hd;
}
.footer {
  font-size: 0.75rem;
  background-color: #4c7d7e;
  color: white;
  grid-area: ft;
}
.aside-left, .aside-right {
  font-size: 0.85rem;
  background-color: #6a7d8c;
  color: black;
}
.main {
  color: black;
  grid-area: main;
  background-color: #7c959d;
}
.aside-left {
  grid-area: al;
}
.aside-right {
  grid-area: ar;
}
.container {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template: 1fr 3fr 1fr / 1fr 2fr 1fr;
  grid-template-areas: 
    "hd hd hd "
    "al main ar"
    "ft ft ft";
}

HTML 代码

<div class="container">
  <header class="header">
    Header
  </header>
  <main>
    <aside class="aside-left">
      Left Column
    </aside>

    <div class="main">
      Main Content
    </div>

    <aside class="aside-right">
      Right Column
    </aside>
  </main>
  <footer class="footer">
    Footer
  </footer>
</div>

排查提示 #

• 核心问题：HTML结构不符合Grid布局要求
  Grid布局中，只有container的直接子元素才会成为网格项，才能被grid-area属性分配到指定网格区域。你当前把.aside-left、.main、.aside-right嵌套在了<main>标签里，这三个元素不是container的直接子元素，所以无法被grid-template-areas定义的布局规则控制。
• 修正方向：移除外层的<main>标签，让.aside-left、.main、.aside-right直接作为container的子元素，与header、footer同级。
• 额外检查：确认所有grid-area的命名和grid-template-areas中的名称完全一致（你的代码这部分是正确的）。

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