如何让所有Grid元素宽度匹配最宽元素且避免拉伸？

完全不需要JavaScript，仅通过CSS就能实现需求，让所有列的宽度自动匹配最宽元素的宽度，同时保持内容自然排列不被拉伸或移动。

修改方案 #

1. 移除li的width: fit-content样式
2. 给容器ul添加grid-template-columns: max-content（结合grid-auto-flow: column，该规则会自动应用到所有列）

修改后的完整代码 #

* {
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: "Rubik", sans-serif;
    font-size: 16px;
}
ul {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1em;
  width: fit-content;
  grid-template-columns: max-content; /* 关键新增样式 */
}

li {
  /* 移除 width: fit-content; */
  background: coral;
  padding: 1em 2em;
  font-size: 12px;
}

<ul>
  <li>
    <p>Name</p>
  </li>
  <li>
    <p>Name</p>
  </li>
  <li>
    <p>A larger name</p>
  </li>
</ul>

原理说明 #

grid-template-columns: max-content会让列宽度等于该列内容的最大宽度，配合grid-auto-flow: column自动生成与子元素数量匹配的列后，所有列都会继承这个宽度规则，最终所有li的宽度都会和最宽元素保持一致。

如果不确定子元素数量，也可以用repeat(auto-fit, max-content)替代max-content，效果完全相同：

ul {
  grid-template-columns: repeat(auto-fit, max-content);
}

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