使用CSS Grid如何让列表项自适应尺寸始终仅显示2.5个元素

实现方案 #

核心思路是通过动态计算网格列宽，让2.5个方块+对应的间隙刚好撑满容器的可视宽度，不需要关心列表项总数量，缩放时会自动适配。

改动点说明 #

• 给ul添加grid-auto-columns规则，用calc动态计算每列宽度：总宽度减去2个间隙的总宽度后，除以2.5得到单列宽度
• 重置ul的默认内边距和列表样式，避免默认样式干扰宽度计算
• 去掉li的固定宽高，宽度设为100%继承网格列宽，用aspect-ratio: 1保证宽高始终相等

完整代码 #

ul {
  display: grid;
  grid-gap: 20px;
  grid-auto-flow: column;
  overflow-x: auto;
  overflow-y: hidden;
  /* 重置默认样式 */
  padding: 0;
  list-style: none;
  /* 动态计算列宽：2个间隙 + 2.5个列刚好占满容器宽度 */
  grid-auto-columns: calc((100% - 2 * 20px) / 2.5);
}
li {
  display: inline-block;
  vertical-align: top;
  /* 自适应宽高 */
  width: 100%;
  aspect-ratio: 1/1;
  white-space: normal;
  background: grey;
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
</ul>

逻辑验证 #

不管容器怎么缩放，100%都会取当前容器的可视宽度，计算出来的列宽会同步变化，始终保证2个完整方块+第3个方块的一半刚好完全展示在可视区域内，超出部分横向滚动即可查看。如果后续调整间隙大小，只需要修改calc里的2 * 20px对应数值即可。

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