Grid布局卡片移动端无间距、桌面端未居中问题求解

问题修复说明 #

1. 移动端卡片无间距问题

你的.cards样式中同时定义了gap: 10px 2rem和grid-row-gap: 5px，后者会覆盖前者的行间距设置，导致实际行间距只有5px视觉上接近无间距，删除多余的grid-row-gap: 5px即可保留10px的行间距。
另外你写的padding: 5是无效属性（缺少单位），调整为padding: 0即可。

2. 桌面端卡片不居中问题

你当前使用的grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))规则里，1fr会让卡片自动拉伸撑满整行宽度，无法居中。将该规则修改为grid-template-columns: repeat(auto-fit, 300px)，配合已有的justify-content: center即可实现桌面端卡片居中排列。

3. 其他语法/样式异常修正

• HTML代码中每个<li>下的卡片都缺少<a>标签的起始标记，只有闭合的</a>，需要补全否则交互和样式都会异常。
• .card类中的height: 130%会导致卡片高度溢出，修改为height: 100%即可。
• .card__image类中的width: 120%会导致图片横向溢出，修改为width: 100%即可适配卡片宽度。

修改后核心代码示例

.cards {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, 300px);
  gap: 10px 2rem;
  margin: 4rem 5vw;
  padding: 0;
  list-style-type: none;
}

.card {
  position: relative;
  display: block;
  height: 100%;  
  border-radius: calc(var(--curve) * 1px);
  overflow: hidden;
  text-decoration: none;
  border: solid white;
}

.card__image {      
  width: 100%;
  height: auto;
}

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