为何容器内的grid areas未按设置显示？nav与main无法左右对齐

你的grid-template-areas写法是让nav和main分别占据单独一行，所以它们是垂直堆叠状态，而非左右对齐。具体来说，"nav" "content"这种写法表示第一行是nav区域，第二行是content区域，自然不会形成左右排列的布局。

要实现nav左对齐、main右对齐的左右布局，需要做以下修改：

步骤1：调整网格区域与列定义 #

修改容器的网格配置，让两个区域处于同一行的不同列中：

.container {
  display: grid;
  /* 将nav和content放在同一行的两个列区域 */
  grid-template-areas: "nav content";
  /* 分配列宽：nav占固定宽度，main占剩余全部空间 */
  grid-template-columns: 200px 1fr;
}

步骤2：可选内容对齐优化 #

如果需要让元素内部的文本也对应左/右对齐，可给两个元素添加文本对齐样式：

#navbar {
  grid-area: nav;
  text-align: left;
}

#main-doc {
  grid-area: content;
  text-align: right;
}

修改后的完整CSS代码 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  padding-left: 40px;
}

code {
  padding-left: 10px;
}

.container {
  display: grid;
  grid-template-areas: "nav content";
  grid-template-columns: 200px 1fr;
  gap: 15px; /* 可选：添加区域间距，优化视觉 */
}

#navbar {
  grid-area: nav;
  text-align: left;
  padding: 1rem;
}

#main-doc {
  grid-area: content;
  text-align: right;
  padding: 1rem;
}

关键说明 #

• grid-template-columns: 200px 1fr：200px固定nav列的宽度，1fr让main列自动占据容器剩余的所有可用空间，保证布局自适应。
• 若不需要固定nav宽度，也可使用比例分配，比如grid-template-columns: 1fr 3fr，让nav占1份宽度，main占3份宽度。

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