如何让CSS Grid项按比例伸缩，实现标题字形等间距与均等重叠

你可以通过「等宽网格列+字符居中」的组合实现需求，核心思路是让每个字符占据的网格列宽度完全均等，字符本身在列内居中展示，既保证宽容器下字间距均匀，窄容器下所有列同步等比例收缩，所有字符就会同时重叠，不会出现部分字符先重叠的问题。

代码实现 #

CSS 代码 #

h1 {
  display: grid;
  /* 列数和字符数保持一致，每列宽度均等 */
  grid-template-columns: repeat(10, 1fr);
  justify-content: space-between;
}
h1 > span {
  /* 字符在列内居中，保留自身原始宽度不会被拉伸压缩 */
  text-align: center;
}

HTML 代码（和原有实现一致） #

<h1>
  <span>W</span><span>i</span><span>l</span><span>d</span><span> </span><span>S</span><span>p</span><span>a</span><span>c</span><span>e</span>
</h1>

动态适配不定长标题 #

如果你的标题字符数不固定，可以加一段极短的JS动态设置网格列数：

const title = document.querySelector('h1')
const charCount = title.querySelectorAll('span').length
title.style.gridTemplateColumns = `repeat(${charCount}, 1fr)`

效果说明 #

• 容器宽度足够时：每列宽度=容器总宽/字符总数，字符在列内居中，相邻字符的间距天然均等，占满全宽
• 容器宽度不足时：所有列同步等比例收缩，当列宽小于当前列内字符宽度时，所有字符会同时开始和相邻字符重叠，不会出现W比i先重叠的问题

内容的提问来源于stack exchange，提问作者Jens Draser-Schieb