CSS Grid使用auto-fill实现首行4项同时保持响应式布局的问题

数据老陈

2026-9-23

问题排查与修改方案

现有代码问题

.Test-item 中添加了float: left属性，Grid布局不需要浮动规则，浮动会干扰Grid的自动排列逻辑，是导致布局异常的核心原因之一。
.Test-item 固定设置了width: 100px，和Grid列宽115px不匹配，会导致单元格内容错位。

修改方法

删除.Test-item中的float: left和固定width属性
如果你希望宽屏场景下最多一行放4个元素，避免宽度过大时一行出现更多元素，可给.grid-container添加最大宽度限制，小屏场景下依然保留自适应缩小的能力。

修改后代码

CSS

.grid-container {
  display: grid !important;
  grid-gap: 10px !important;
  grid-template-columns: repeat(auto-fill, minmax(115px, 115px)) !important;
  margin: 10px 0 0 0;
  /* 宽屏最多一行4个，可根据需求调整或删除 */
  max-width: calc(4 * 115px + 3 * 10px);
}

.grid-container p {
  font-size: 12px;
  color: #959595;
  font-weight: 630 !important;
  line-height: 14px;
}

.Test-item {
  background-color: blue;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  height: 85px !important;
  color: #959595 !important;
  font-weight: bold !important;
  line-height: 14px !important;
  cursor: pointer !important;
  margin: 0;
}