如何让CSS Grid布局中的首尾元素尺寸与其他元素不同？

听起来你遇到的核心问题是：在动态列数的Grid布局里（用了auto-fill），想让首尾元素的最大宽度限制为45px，但直接修改列模板或者给元素设max-width都没达到预期，还出现了行截断的问题。我来给你分两种场景梳理解决方案：

场景1：仅针对整个网格的第一个和最后一个子元素 #

如果你的需求只是让网格里的第一个<div>和最后一个<div>控制在45px以内，其他元素保持原有的minmax(90px, 1fr)列宽逻辑，那不需要改Grid的列模板，只需要调整首尾元素的对齐和溢出规则：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px; /* 加个间隙让布局更舒服，可选 */
}

/* 给首尾元素设置样式 */
.grid > div:first-child,
.grid > div:last-child {
  max-width: 45px;
  justify-self: start; /* 取消Grid默认的"拉伸填充列宽"行为，让元素保持自身宽度 */
  align-self: center; /* 可选，解决内容垂直方向溢出导致行高异常的问题 */
  overflow: hidden; /* 防止内容过长撑断行，隐藏溢出部分 */
  text-overflow: ellipsis; /* 可选，溢出内容显示省略号，更友好 */
  white-space: nowrap; /* 可选，强制内容不换行，避免行高变化 */
}

原理说明： #

Grid默认会让子元素的justify-self属性为stretch，也就是强制元素撑满所在列的宽度，所以你之前直接设max-width时，元素其实还是被拉到了列宽90px，看起来没效果。设置justify-self: start后，元素会乖乖遵守max-width的限制，列宽依然保持动态的minmax(90px, 1fr)，不会影响其他元素的布局。而overflow相关属性就是解决你提到的“行被截断”问题——如果元素内容太长，溢出后会破坏行的高度，加上这些规则就能把内容限制在45px宽度内。

场景2：针对每行的首尾子元素 #

如果你的需求是每一行的第一个和最后一个元素都要限制为45px，情况会复杂一点：因为auto-fill的列数会随屏幕宽度变化，没法用固定的CSS选择器直接匹配每行首尾。这里提供两种方案：

方案A：CSS + JavaScript 动态匹配（推荐） #

先用JavaScript监听窗口大小变化，计算每行的列数，然后给每行首尾元素添加类名，再用CSS设置样式：

// 给每行首尾元素添加类名的函数
function markRowFirstLast() {
  const grid = document.querySelector('.grid');
  const items = Array.from(grid.children);
  if (!items.length) return;

  // 获取计算后的列宽和网格宽度，算出每行能放多少列
  const columnWidth = parseFloat(getComputedStyle(grid).gridTemplateColumns.split(' ')[0]);
  const columnsPerRow = Math.floor(grid.offsetWidth / columnWidth);

  // 遍历所有元素，添加/移除类名
  items.forEach((item, index) => {
    item.classList.remove('row-first', 'row-last');
    // 匹配每行第一个元素
    if (index % columnsPerRow === 0) {
      item.classList.add('row-first');
    }
    // 匹配每行最后一个元素或网格最后一个元素
    if ((index + 1) % columnsPerRow === 0 || index === items.length - 1) {
      item.classList.add('row-last');
    }
  });
}

// 初始化调用，窗口 resize 时重新计算
markRowFirstLast();
window.addEventListener('resize', markRowFirstLast);

然后对应的CSS：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
  gap: 8px;
}

/* 给每行首尾元素设置最大宽度 */
.grid > .row-first,
.grid > .row-last {
  max-width: 45px;
  justify-self: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 非首尾元素保持最小90px宽度 */
.grid > div:not(.row-first):not(.row-last) {
  min-width: 90px;
}

方案B：纯CSS（局限性大） #

用复杂的CSS选择器尝试匹配，但只在元素数量刚好填满行数时生效，不推荐用于动态内容：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
  gap: 8px;
}

.grid > div:first-child,
.grid > div:last-child,
.grid > div:nth-child(n):nth-last-child(n+2):nth-child(1n + 1):nth-last-child(1n + 2) {
  max-width: 45px;
  justify-self: start;
  overflow: hidden;
}

.grid > div:not(:first-child):not(:last-child) {
  min-width: 90px;
}

为什么你之前的方法不生效？ #

你用grid-template-columns: 45px repeat(auto-fill, minmax(90px, 1fr)) 45px的问题在于：你固定了Grid的第一列和最后一列宽度为45px，但如果最后一个元素不在最后一列（比如最后一行元素数量不满），那它还是会继承中间列的90px宽度；而且第一列永远是45px，即使第一行的第一个元素需要更大空间，这完全偏离了你“让元素本身限制为45px”的需求。

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