如何实现桌面端带最大宽度限制的响应式CSS Grid布局？

架构老林

2026-8-6

解决方案

可以通过修改Grid的列模板规则并结合媒体查询实现需求，同时解决点击区域异常的问题：

核心思路

移动端：保留原有minmax(300px, 1fr)规则，让元素自动填满屏幕宽度
桌面端：限制每列最大宽度，通过auto-fit保证元素数量多时自动换行填满容器；用justify-content: center让少量元素居中显示，且单元格宽度与元素完全匹配，避免空白区域可点击的问题

完整代码

CSS

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

.item {
  background-color: #bfe0f5;
  height: 300px;
  cursor: pointer;
}

.separation {
  margin: 100px 0;
}

/* 桌面端适配（可根据需求调整断点宽度） */
@media (min-width: 768px) {
  .grid {
    /* 列宽最小300px，最大600px，可按需修改max值 */
    grid-template-columns: repeat(auto-fit, minmax(300px, fit-content(600px)));
    /* 元素数量少时居中显示 */
    justify-content: center;
  }
}

HTML

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="separation"></div>

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
</div>