grid-template-areas使用.标记无法创建空白区域如何解决

问题原因 #

你在grid-template-areas中使用.标记的只是对应行的单个网格单元格为空白，而非整列空白：

• 第一行（header所在行）的第1、4列被标记为.，仅这两个单元格是空白状态
• 第二行（内容行）的第1列分配给了aside，第2-4列分配给了section，所以第1、4列的下方单元格是有内容的
  因此header的左右仅第一行有空白，下方的aside、section会自动填充这两列的剩余位置，和你预期的效果不符。

修复方案 #

方案1：全页左右统一留白（推荐） #

如果希望所有内容（aside、section、footer）和header保持一致的左右边距，直接调整grid-template-areas配置，将所有行的左右两列都设为空白即可：

body {
  display: grid;
  /* 可按需调整列宽比例，当前设置为左右空白列各占1份，中间内容区按1:3分配给aside和section */
  grid-template-columns: 1fr 1fr 3fr 1fr;
  grid-template-areas:
    ". header  header  ."
    ". aside   section ."
    ". footer  footer  .";
}

方案2：仅header单独留白 #

如果不需要修改其他内容的布局，只给header加左右内边距即可实现效果，代码更简单：

header {
  grid-area: header;
  text-align: center;
  font-family: "Open Sans", sans-serif;
  font-size: xxx-large;
  padding-top: 40px;
  border-bottom: 2px solid #222;
  /* 左右各留10%视口宽度的空白，可自定义数值，也可以用margin-inline实现 */
  padding-inline: 10vw;
}

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