CSS Grid网页显示扁平网格而非预期正方形布局，问题出在哪里？

核心错误点 #

• grid-area属性赋值不需要加引号，你代码中给区域名加了双引号，导致元素和网格模板区域的映射失效，浏览器无法正确识别每个元素对应的布局位置。
• 你没有显式定义网格的行高与列宽，默认状态下网格行高由元素内容高度撑开，列宽会自动占满容器横向空间，最终就会出现你看到的扁长条效果，无法形成正方形布局。

修正后的代码 #

CSS 代码 #

.header {
  grid-area: h;
  background: #f0f0f0;
}

.sideMenu {
  grid-area: s;
  background: #e0e0e0;
}

.content {
  grid-area: c;
  background: #d0d0d0;
}

.footer {
  grid-area: f;
  background: #c0c0c0;
}

.grid-body {
  display: grid;
  /* 定义5列，每列宽100px，可根据需求调整尺寸 */
  grid-template-columns: repeat(5, 100px);
  /* 定义5行，每行高100px，和列宽保持一致即可得到正方形网格单元 */
  grid-template-rows: repeat(5, 100px);
  grid-template-areas: 
        ". h h h ."
        "s . . . ."
        "s . c c ."
        ". . c c ."
        ". f f . .";
  /* 可选：添加间隙区分不同区域 */
  gap: 2px;
}

HTML 代码（与原代码一致，无需修改） #

<div class="grid-body">
  <div class="header">Header</div>
  <div class="sideMenu">Side Menu</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

如果你需要自适应的正方形布局，可以将grid-template-columns和grid-template-rows的固定像素值替换为1fr，同时给.grid-body设置固定的宽高值（比如宽高均设为500px）即可。

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