如何优化CSS Grid代码，使其根据项目数量自动均分列？

纯CSS自适应实现（推荐） #

直接修改grid-template-columns属性，用auto-fit配合minmax即可实现根据项目数量和容器宽度自动调整列数，同一行内的项目会均分该行宽度：

.grid-sample {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    row-gap: 4rem;
    padding: 0 5rem; 
}

核心属性解释：

• auto-fit：自动匹配列数，当容器宽度足够容纳所有项目时，列数等于项目总数；容器宽度不足时，自动换行，每行的项目数量会根据容器宽度动态调整。
• minmax(0, 1fr)：定义每列的最小宽度为0，最大宽度为1fr（即该行可用空间的等分份额），确保同一行的所有项目能均匀分配宽度，不会出现空白列。

强制单行均分（需JS配合） #

如果需要强制所有项目始终在同一行（不换行），列数严格等于项目数量，可以用CSS变量配合JS动态设置列数：

CSS代码：

.grid-sample {
    display: grid;
    grid-template-columns: repeat(var(--item-count), 1fr);
    row-gap: 4rem;
    padding: 0 5rem; 
}

JS代码（动态设置项目数量）：

// 遍历所有grid容器，设置项目数量变量
document.querySelectorAll('.grid-sample').forEach(grid => {
  const itemCount = grid.children.length;
  grid.style.setProperty('--item-count', itemCount);
});

这种方式下，无论容器宽度如何，所有项目都会在一行，且每个项目占总宽度的1/N（N为项目数量）。

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