CSS Grid布局中能否重复使用grid-area实现双侧边栏布局？

你现在的代码里有两个关键问题需要修正，调整后就能完美实现你想要的左右侧边栏+中间内容的布局：

1. 纠正属性拼写错误 #

首先，你写的grid-area-templates是错误的，正确的CSS属性名是grid-template-areas。

2. 正确编写网格模板结构 #

Grid的模板需要按行来定义，每一行用引号包裹。你想要的第三行是三个并列区域（sidebar、content、sidebar），所以模板应该这样写：

.grid {
  display: grid;
  /* 定义每行的区域：header占整行，nav占整行，sidebar+content+sidebar一行，footer占整行 */
  grid-template-areas:
    "header header header"
    "nav nav nav"
    "sidebar content sidebar"
    "footer footer footer";
  /* 定义列宽比例：左右侧边栏各占1份，中间内容占3份（比例可按需调整） */
  grid-template-columns: 1fr 3fr 1fr;
  /* 设置行的最小高度，让内容区有足够展示空间 */
  grid-auto-rows: minmax(100px, auto);
  /* 可选：给网格区域之间添加间距 */
  gap: 10px;
}

3. 给每个元素指定对应的网格区域 #

接下来，给页面中的每个区块元素设置grid-area属性，对应模板里的名称：

.header {
  grid-area: header;
  background: #f0f0f0;
}
.nav {
  grid-area: nav;
  background: #e0e0e0;
}
.sidebar {
  grid-area: sidebar;
  background: #d0d0d0;
}
.content {
  grid-area: content;
  background: #c0c0c0;
}
.footer {
  grid-area: footer;
  background: #f0f0f0;
}

对应的HTML结构示例：

<div class="grid">
  <header class="header">HEADER</header>
  <nav class="nav">NAV</nav>
  <aside class="sidebar">SIDEBAR</aside>
  <main class="content">CONTENT</main>
  <aside class="sidebar">SIDEBAR</aside>
  <footer class="footer">FOOTER</footer>
</div>

为什么你的原写法不行？ #

你之前的模板把每个区域写成单独一行（"header" "nav" "sidebar" "content" "sidebar" "footer"），这相当于让每个区块占满一整行，自然无法实现左右侧边栏并列的效果。Grid允许重复使用同一个区域名称，只要在模板的同一行里并列写出来就行，它会自动把对应grid-area的元素放到对应的位置上。

不需要用其他替代方案，纯CSS Grid完全能搞定这个布局，而且还能根据需求灵活调整列宽、行高和间距~

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