使用CSS Grid实现居中错位方块时子元素重叠，请问错误在哪

你的代码存在3个核心问题，调整后即可实现预期的错位正方形效果：

• 属性名拼写错误：.container中定义网格轨道的属性名grid-tmplate-columns、grid-tmplate-rows均漏写了字母e，正确属性名为grid-template-columns、grid-template-rows。拼写错误导致所有网格规则未生效，两个子元素默认排布在第一个网格单元格，因此重叠。
• 网格线命名不匹配：你定义行网格线时未声明row1-end、row2-end这两个子元素定位要用到的名称，即便属性拼写正确，行定位规则也会失效。
• 子元素固定尺寸适配问题：你给子元素设置了固定宽高50px * 50px，但定义的网格区域尺寸远大于该值，若需要子元素填满对应网格区域可删除固定宽高设置，保留固定尺寸则不影响错位效果。

修正后代码示例 #

CSS代码 #

.container {
  border: 2px solid black;
  background-color:lightgrey;
  width: 350px;
  height:350px;
  display: grid;
  /* 修正拼写错误 */
  grid-template-columns: [col1] 35px [col2-end col3-start] 20px [col3-end col4-start] 50% [col4-end col5-start] 20px [col5-end col6-start] 35px [col6-end end];
  /* 修正拼写错误，补充缺失的行网格线命名 */
  grid-template-rows: [start] 35px [row1-end row2-start] 20px [row2-end row3-start] 50% [row3-end row4-start] 20px [row4-end row5-start] 35px [row5-end end];
}

.child-one {
  opacity:30%;
  border: 2px solid blue;
  background-color: lightblue;
  width: 50px;
  height: 50px;
  grid-column-start: col2-end;
  grid-column-end: col5-start;
  grid-row-start: row1-end;
  grid-row-end: row4-end;
}

.child-two {
  border: 2px solid #66CDAA;
  background-color: seagreen;
  width: 50px;
  height: 50px;
  grid-column-start: col3-end;
  grid-column-end: col6-start;
  grid-row-start: row2-end;
  grid-row-end: row6-end;
}

HTML代码（无改动） #

<div class="container">
  <div class="child-one">Bottom</div>
  <div class="child-two">Top</div>
</div>

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