如何在subgrid中水平对齐元素，大屏幕下居中且保留1200px宽度？

当前布局存在以下设定：

• <header ul> 采用Flexbox实现布局
• <main section p> 承载文本内容
• 两者均设置 max-width = 1200px，并通过**命名网格线（named grid lines）和子网格（subgrid）**定位在页面中间区域的起始位置

需要解决的问题：

1. 大屏幕宽度下，如何水平对齐 <header ul> 和 <main section p> 的内容，同时保留1200px的宽度？
2. 更新1：当屏幕宽度较大（例如1500px）时，<header> 对齐到 middle-start 左侧，如何将其与 <main section> 中的文本一同置于屏幕中间？
3. 更新2：如何修改代码以实现目标居中对齐效果？

CSS #

body { 
  margin: 0;
}
*, *::before, *::after {
  box-sizing: border-box;
} 
ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
#app {
  height: 100dvh;
  display: grid;
  grid-template-rows: 
    [head-start] auto [head-end main-start] 1fr [main-end];
  grid-template-columns: 
    [full-start] 5% [middle-start] auto [middle-end] 5% [full-end];
}
.header-contaiter {
  grid-row: head-start / head-end;
  grid-column: full-start / full-end;
  display: grid;
  grid-template-columns: subgrid;
}
header {
  grid-column: middle-start / middle-end;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  gap: 5px;
}
.header-contaiter header ul {
  display: flex;
  gap: 20px;
}
main {
  grid-row: main-start / main-end;
  grid-column: full-start / full-end;
  display: grid;
  grid-template-columns: subgrid;
}
section {
  grid-column: middle-start / middle-end;
  max-width: 1200px;
}

HTML #

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <meta charset="UTF-8" />  
</head>
<body>
  <div id="app">
    <div class="header-contaiter">
      <header>
          <ul>
            <li>Item-1</li>
            <li>Item-1</li>
            <li>Item-1</li>
            <li>Item-1</li>
          </ul>
          <ul>
            <li>Item-1</li>
            <li>Item-1</li>
            <li>Item-1</li>
            <li>Item-1</li>
          </ul>
          <ul>
            <li>Item-1</li>
            <li>Item-1</li>
            <li>Item-1</li>
            <li>Item-1</li>
          </ul>
        </header>
      </div>
    <main>
      <section>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni optio similique officiis sit praesentium debitis velit...</p>
      </section>
      </main>
  </div>
</body>
</html>

核心问题是当前根网格的中间列宽度设为auto，当屏幕宽度超过1200px时，中间网格区域会被拉伸，导致header和section因max-width限制而靠左对齐。调整方案如下：

修改步骤 #

1. 调整根网格列定义：将中间列宽度改为minmax(0, 1200px)，左右两侧用1fr均分剩余空间，这样中间区域最大宽度固定为1200px且自动居中。
2. 移除冗余的max-width：根网格已限制中间区域宽度，无需再给header和section单独设置。
3. 保留子网格逻辑：维持header-container和main的子网格设置，继承根网格的列定义。

修改后的CSS代码：

body { 
  margin: 0;
}
*, *::before, *::after {
  box-sizing: border-box;
} 
ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
#app {
  height: 100dvh;
  display: grid;
  grid-template-rows: 
    [head-start] auto [head-end main-start] 1fr [main-end];
  grid-template-columns: 
    [full-start] 1fr [middle-start] minmax(0, 1200px) [middle-end] 1fr [full-end];
}
.header-contaiter {
  grid-row: head-start / head-end;
  grid-column: full-start / full-end;
  display: grid;
  grid-template-columns: subgrid;
}
header {
  grid-column: middle-start / middle-end;
  display: flex;
  justify-content: space-between;
  gap: 5px;
}
.header-contaiter header ul {
  display: flex;
  gap: 20px;
}
main {
  grid-row: main-start / main-end;
  grid-column: full-start / full-end;
  display: grid;
  grid-template-columns: subgrid;
}
section {
  grid-column: middle-start / middle-end;
}

效果说明 #

• 屏幕宽度≤1200px时，中间区域占满可用宽度，header和section自然铺满。
• 屏幕宽度>1200px时，中间区域固定为1200px，左右两侧均分剩余空间，确保header和section始终居中对齐，且内容宽度保持1200px。
• 完全保留了命名网格线和子网格的使用逻辑，同时解决了大屏幕下的对齐问题。

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