如何将CSS Grid布局中的三个指定单元格移动到网格顶部

核心修改逻辑 #

当前网格配置中，表头元素未指定网格位置，且行高定义将表头高度放在了最后一位，导致表头出现在底部。按以下步骤修改即可实现表头置顶：

步骤1：调整网格行模板 #

修改.gridWrapper的grid-template-rows配置，将表头行放在最顶部：

.gridWrapper {
  color: white;
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 把表头高度100px移到最前面，后续内容行依次后移 */
  grid-template-rows: 100px 500px 500px;
  background-color: transparent;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 100px;
  justify-content: center;
}

步骤2：给表头元素指定第一行网格位置 #

新增三个表头类的网格定位配置：

.heading1 {
  grid-area: 1 / 1 / 2 / 2;
}
.heading2 {
  grid-area: 1 / 2 / 2 / 3;
}
.heading3 {
  grid-area: 1 / 3 / 2 / 4;
}

步骤3：同步调整原有内容元素的行定位 #

因为新增了顶部表头行，原有内容元素的行号需要全部加1，避免和表头重叠：

.a {
  grid-area: 2 / 2 / 3 / 3;
}
.b {
  grid-area: 3 / 2 / 4 / 3;
}
.c {
  grid-area: 3 / 3 / 4 / 4;
}
.d {
  grid-area: 2 / 1 / 3 / 2;
}
.e {
  grid-area: 3 / 1 / 4 / 2;
}
.f {
  grid-area: 2 / 3 / 3 / 4;
}

最终效果参考 #

#

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