如何让响应式CSS Grid单元格均匀分布，避免末行大量空置？

问题分析 #

使用grid-template-columns: repeat(auto-fill, Xrem)创建响应式网格时，容器会根据宽度生成固定数量的列，但当元素总数无法填满所有行时，最后一行的剩余列会占据空间，导致元素集中在左侧，大部分区域空置。需实现单元格固定宽度、容器响应式，同时让最后一行元素在可用行内均匀分布。

解决方案 #

方法1：使用Flexbox（推荐） #

Flexbox天然适配动态元素数量的换行对齐需求，简单配置即可实现最后一行均匀分布：

.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly; /* 可替换为space-around/space-between，按需选择 */
  gap: 1rem; /* 自定义单元格间距 */
}

.grid-item {
  width: 8rem; /* 替换为你的固定宽度值 */
  height: 8rem; /* 示例高度，按需调整 */
  background: #ddd;
}

• space-evenly：元素之间、元素与容器边缘的间距完全相等
• space-around：元素两侧间距相等，边缘间距为元素间间距的一半
• space-between：元素两端对齐，元素间间距相等，边缘无间距

方法2：Grid结合动态列数（保留Grid布局） #

若必须使用Grid，可通过auto-fit结合minmax实现，单元格会在最小宽度基础上自适应填充（小范围弹性变化）：

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

.grid-item {
  height: 8rem;
  background: #ddd;
}

此方式下，列数随容器宽度自动调整，最后一行单元格会拉伸填充整行，实现均匀分布。

方法3：Grid伪元素填充（严格固定宽度） #

若需严格固定单元格宽度且保留Grid布局，可通过伪元素填充空列，配合justify-content: space-between实现对齐：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 8rem);
  gap: 1rem;
  justify-content: space-between;
}

.grid-container::after {
  content: "";
  width: 8rem; /* 与单元格宽度一致 */
  visibility: hidden; /* 隐藏伪元素 */
}

.grid-item {
  height: 8rem;
  background: #ddd;
}

注意：需根据最大可能列数添加足够伪元素，否则当最后一行空列数多于伪元素数量时，仍会存在空隙。

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