如何实现十字形页面布局？HTML/CSS布局方案咨询

针对你需求的布局，CSS Grid是最直接且无冗余的解决方案，能完美解决四个边角宽度一致、内容盒自适应及content-C可超宽居中的问题，彻底规避你之前遇到的边角宽度不一致的bug。

核心思路 #

通过Grid划分5列3行的网格结构：

• 第1、5列宽度强制相等，用于放置四个边角的space-*盒子，保证它们宽度始终一致
• 中间3列（第2-4列）用于控制内容盒的位置，其中content-C跨这三列实现超宽居中，content-T/B仅占中间列实现自适应

完整代码实现 #

HTML结构

<div class="layout-container">
  <div class="space space-tl">space-TL</div>
  <div class="content content-t">content-T</div>
  <div class="space space-tr">space-TR</div>
  
  <div class="space space-cl">space-CL</div>
  <div class="content content-c">content-C（可超长内容：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.）</div>
  <div class="space space-cr">space-CR</div>
  
  <div class="space space-bl">space-BL</div>
  <div class="content content-b">content-B</div>
  <div class="space space-br">space-BR</div>
</div>

CSS样式

.layout-container {
  display: grid;
  /* 第1、5列宽度相等（由边角中最宽的内容决定），中间3列自适应 */
  grid-template-columns: 1fr auto auto auto 1fr;
  grid-template-rows: auto auto auto; /* 行高随内容自适应 */
  gap: 0; /* 消除网格间隙，保证布局线对齐 */
  align-items: start; /* 行内元素顶部对齐，避免内容撑开高度不一致 */
}

/* 第一行布局 */
.space-tl { grid-area: 1 / 1 / 2 / 2; }
.content-t { 
  grid-area: 1 / 3 / 2 / 4;
  justify-self: center; /* 水平居中 */
}
.space-tr { grid-area: 1 / 5 / 2 / 6; }

/* 第二行布局 */
.space-cl { 
  grid-area: 2 / 1 / 3 / 2;
  justify-self: end; /* 内容靠右，对齐content-C左侧 */
}
.content-c {
  grid-area: 2 / 2 / 3 / 5; /* 跨第2-4列，实现超宽范围 */
  justify-self: center; /* 内容居中 */
  width: fit-content; /* 宽度随内容自适应，可超过content-T/B */
}
.space-cr { 
  grid-area: 2 / 5 / 3 / 6;
  justify-self: start; /* 内容靠左，对齐content-C右侧 */
}

/* 第三行布局 */
.space-bl { grid-area: 3 / 1 / 4 / 2; }
.content-b { 
  grid-area: 3 / 3 / 4 / 4;
  justify-self: center;
}
.space-br { grid-area: 3 / 5 / 4 / 6; }

/* 可选：添加边框方便调试布局 */
.space, .content {
  border: 1px solid #333;
  padding: 8px;
}

方案优势 #

1. 边角宽度严格一致：第1、5列用1fr强制等宽，四个边角盒子都占据这两列，无论content-T/B宽度如何变化，边角宽度始终相同
2. 内容盒自适应：content-T/B仅占中间列，宽度随内容自动调整，且通过justify-self: center实现居中
3. content-C灵活超宽：跨3列布局，宽度随内容自适应，天然水平居中，完全支持超过content-T/B的宽度
4. 无冗余结构：无需额外嵌套容器，直接通过Grid区域定位实现所有元素布局，代码简洁易维护
5. 高度自适应：所有行高由内容自动撑开，无需手动设置高度

扩展调整 #

如果需要边角宽度固定，只需将grid-template-columns中的1fr替换为固定值（如120px）即可，其他逻辑无需修改。

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