Django网站CSS Grid布局对齐错误：导航与内容列显示异常

问题现象 #

• 左侧导航区（“Browse Topics”及主题列表）未占据预设的1fr宽度，反而缩进显示在右侧内容区的3fr位置
• 内容区（“2 Rooms Available”及列表）被挤到导航区下方，仅占1fr宽度
• 删除导航区后，内容区可正常占据3fr宽度

核心排查方向及解决方法 #

1. 确认Grid容器的CSS定义 #

首先检查承载布局的容器（比如main或自定义的.grid-container）是否正确设置了网格列：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* 关键：确保是1fr + 3fr的列分配 */
  gap: 1.5rem; /* 可选，避免元素粘连 */
}

如果容器的grid-template-columns未正确定义，或者容器没有包裹住导航和内容两个子元素，就会导致布局错乱。

2. 给子元素指定网格列位置 #

给导航区和内容区明确分配网格列，避免浏览器自动分配出错：

/* 左侧导航栏 */
.topic-sidebar {
  grid-column: 1 / 2; /* 固定在第1列 */
}

/* 右侧内容区 */
.content-area {
  grid-column: 2 / 3; /* 固定在第2列 */
}

3. 排查Django模板嵌套错误 #

检查Home.html、Main.html等模板的标签结构：

• 确保导航区和内容区是Grid容器的直接子元素，没有被额外的<div>或其他标签嵌套包裹（多余的父元素会破坏Grid的子元素识别）
• 检查所有标签是否正确闭合，比如<div>、<section>未闭合会导致布局结构混乱

4. 清除干扰样式 #

检查导航区是否存在以下干扰样式：

• margin-left或padding-left过大导致视觉上的“缩进”
• float: left或其他浮动属性打乱Grid布局，需清除浮动（可添加clear: both）

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