如何使auto-fit布局中单个Grid元素不撑满整行？

针对你遇到的问题——使用repeat(auto-fit, minmax(300px, 1fr))实现响应式Grid时，单个卡片会撑满整行，以下是两种纯CSS解决思路：

方法一：通过媒体查询限制卡片最大宽度 #

利用媒体查询匹配不同设备的列数断点，给卡片设置对应列宽的max-width，确保单个卡片不会超出该宽度：

修改后的CSS #

.container {
  --gap: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap);
}

.card {
  padding: 20px;
  background-color: green;
}

/* 笔记本端（每行3个卡片的断点：300*3 + 2*50 = 1000px） */
@media (min-width: 1000px) {
  .card {
    max-width: calc((100% - 2 * var(--gap)) / 3);
  }
}

/* 平板端（每行2个卡片的断点：300*2 + 50 = 650px） */
@media (min-width: 650px) and (max-width: 999px) {
  .card {
    max-width: calc((100% - var(--gap)) / 2);
  }
}

这个方案无需修改HTML，通过CSS变量和媒体查询精准控制不同设备下卡片的最大宽度，既保留了多卡片时的响应式布局，又让单卡片保持对应列宽。

方法二：优化隐形卡片方案（解决滚动条问题） #

如果你偏好之前的隐形卡片思路，只需调整隐形元素的样式，让它不占据实际空间即可避免滚动条：

修改后的CSS #

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 50px;
}

.card {
  padding: 20px;
  background-color: green;
}

.invis {
  visibility: hidden;
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
}

通过设置height:0、padding:0等属性，让隐形卡片仅占据Grid轨道的位置，但不产生实际高度和内边距，自然不会导致容器溢出。

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