如何使用CSS Grid实现卡片等间距对齐，适配不同设备分辨率

代码错误点与修复方案 #

你当前的布局混乱是由CSS配置不匹配导致的，具体问题和修复方法如下：

1. 类选择器书写错误：你在CSS中写的column为元素选择器，对应HTML中类名为column的容器需要写为.column才会生效
2. 网格配置不匹配：grid-template-columns设置为2列，但grid-template-areas定义了6列区域，两者规则冲突导致布局失效
3. 缺少网格区域绑定：仅定义了grid-template-areas，没有给对应卡片设置grid-area属性，区域规则不会生效
4. 卡片样式破坏网格对齐：给.card设置了固定宽度与左右margin，会覆盖Grid的自动对齐规则，导致不同设备下间距不均

修复后的CSS代码

/* 网格容器配置 */
.column{
  display: grid;                               
  height: auto;
  width: 100%;
  /* 一行放3个卡片，设置3等宽列 */
  grid-template-columns: repeat(3, 1fr);
  /* Grid原生控制统一间距，替代子元素margin，适配所有设备 */
  column-gap: 140px;
  row-gap: 60px;
  padding: 30px;
  background-color: bisque;
  /* 自动生成的行高和卡片高度一致 */
  grid-auto-rows: 350px;
}

/* 卡片配置 */
.card{                                                                 
  width: 100%;
  height: 100%;
  border-radius: 10px;
  padding: 15px;
  box-sizing: border-box;
  cursor: pointer;
  background-image: url(images/pink2.png);
  background-position: center;
  background-size: cover;
  transition: transform 0.5s;
}

如果需要适配移动端小屏幕，可额外添加媒体查询规则，小屏自动切换为单列布局：

@media (max-width: 768px) {
  .column {
    grid-template-columns: 1fr;
  }
}

修改后所有卡片会在网格内自动等距对齐，无需使用padding或position属性适配不同分辨率。

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