如何指定CSS Grid项目高度并调整网格项目布局位置？

问题1：技能卡片高度被过度拉伸 #

CSS Grid默认会让网格项自动拉伸填满所在网格行的高度，这就是技能卡片高度和其他卡片一致的原因。直接给技能卡片添加以下样式即可解决：

#skills {
  align-self: start;
}

align-self: start会让卡片沿着网格行顶部对齐，高度仅适配自身内容，不会被强制拉伸。

问题2：联系卡片位置错误（无需手动定位） #

别用position: relative手动移动卡片，这种方式适配性极差，用Grid原生布局属性就能完美解决：

修改你的网格布局代码，给经历卡片设置跨两行的属性，这样联系卡片会自动跑到右侧技能卡片的下方：

#sections {
  margin: 1em;
  display: grid;
  grid-template-columns: 1fr; // 移动端单列堆叠
  row-gap: 1em;
}

@media only screen and (min-width: 700px) {
  #sections {
    grid-template-columns: 1fr 1fr;
    column-gap: 1em;
  }
  // 让经历卡片占据两行网格空间
  #experience {
    grid-row: span 2;
  }
}

// 删掉之前手动定位的无效代码
/* #contact {
  position: relative;
  left: 102%;
} */

原理：经历卡片占两行后，右侧网格的第一行放技能卡片，第二行自然就会容纳联系卡片，完全符合你的布局需求，而且是响应式友好的实现方式。

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