Grid布局问题：首列占比异常及侧边栏与主内容区布局调整求助

问题1：sidebar列占用空间过大的原因 #

你只通过grid-template-areas划分了区域，但没定义grid-template-columns的宽度规则，Grid会默认根据列内容和可用空间自动分配宽度。再加上sidebar设置了max-width: fit-content，它会根据内部文字长度自适应宽度，而其他列没有明确宽度约束，导致sidebar列看起来比其他列更宽。

问题2：sidebar固定宽度、消除间隙+main文本居中的解决方法 #

修改步骤： #

1. 给Grid容器指定列宽：在.total里添加grid-template-columns: 200px 1fr;，第一个值是sidebar的固定宽度（可按需调整），1fr让main区域占满剩余空间，彻底消除间隙。
2. 固定sidebar宽度：把sidebar的max-width: fit-content改成width: 100%;，让它继承Grid列的固定宽度，避免内容撑开。
3. main文本居中：去掉main里的margin: 0px auto，添加align-items: center;（main是flex列布局，这个属性控制水平居中），若需要垂直居中可调整justify-content的值。

修改后的完整代码： #

CSS部分

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Ottoman+Siyaq&display=swap');

* {
  box-sizing: border-box;
  font-family: "Noto Serif Ottoman Siyaq", serif;
  font-weight: 400;
  font-style: normal;
}

body {
  margin: 0;
}

/* 修改Grid容器，添加列宽规则 */
.total {
  display: grid;
  grid-template-areas: 
    'header header header header header header header' 
    'sidebar main main main main main main' 
    'sidebar footer footer footer footer footer footer';
  grid-template-columns: 200px 1fr; /* 新增：sidebar固定宽200px，main占剩余空间 */
  height: 100vh; /* 改成100vh确保占满视口高度 */
}

header {
  grid-area: header;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 60px;
  border: 1px solid #DAC4DB;
  background-color: #70397F;
  color: #DAC4DB;
}

header>div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.cabecera {
  font-size: 20px;
}

a:link {
  color: #70397F;
  text-decoration: none;
}

a:visited {
  color: #70397F;
  text-decoration: none;
}

/* 修改sidebar宽度规则 */
sidebar {
  grid-area: sidebar;
  background-color: #DAC4DB;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  width: 100%; /* 替换max-width: fit-content，继承Grid列宽 */
}

sidebar>div {
  font-size: 1rem;
  color: #70397F;
  height: 5%;
  display: flex;
  width: 100%;
  padding-right: 8px;
  border-bottom: 1px solid #70397F;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center; /* 可选：让sidebar内部内容居中 */
}

sidebar div:hover {
  background-color: #B59DB6;
}

/* 修改main的居中规则 */
main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 垂直方向顶部对齐，可改成center实现垂直居中 */
  align-items: center; /* 水平方向居中文本 */
  height: 1000px;
  width: 100%;
  /* 去掉margin: 0px auto，避免产生间隙 */
}

footer {
  grid-area: footer;
  padding-top: 25px;
  padding-bottom: 25px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: sticky;
  z-index: 10;
  clear: both;
}

i {
  padding: 7px;
}

.cuadrado-icon {
  padding-top: 5px;
}

.casa-icon {
  padding-top: 3px;

HTML部分（无需修改）

<div class="total">
  <header>
    <div>
      <i class="fa-solid fa-school" style="margin-bottom: 7px;"></i>
      <div class="cabecera">Nombre del centro</div>
    </div>
    <div>
      <div class="cabecera">Nombre del usuario</div> 
      <i class="fa-solid fa-user-pen" style="margin-bottom: 6px;"></i>
    </div>
  </header>

  <sidebar>
    <div>
      <i class="fa-solid fa-house"></i>
      <a href="">CENTRO</a>
    </div>
    <div>
      <i class="fa-solid fa-book"></i>
      <a href="">MÓDULO</a>
    </div>
    <div>
      <i class="fa-solid fa-chalkboard-user"></i>
      <a href="">TUTORÍAS</a>
    </div>
    <div>
      <i class="fa-solid fa-file-lines"></i>
      <a href="">CALIFICACIONES</a>
    </div>
  </sidebar>

  <main>
    <h2>TRENDIG NEWS ON PORTAL</h2>
  </main>

  <footer>
    <p>2024 copyright© María Pérez. All rights&nbsp;reserved</p>
  </footer>
</div>

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