如何让无序列表项容器宽度适配列表中最宽项的宽度？

需求：在无序列表中，让所有列表项容器的宽度和列表里最宽的那个（第三个）保持一致。

修改方案： #

我们可以通过网格布局实现这个效果，只需两步修改样式：

1. 给父元素<ul class="list">添加网格布局样式：

.list {
  display: grid;
  grid-template-columns: max-content;
  padding-left: 0; /* 可选，移除ul默认的左侧内边距，让容器对齐更整齐 */
}

2. 修改.benefit_container的宽度属性：
   把原来的width: max-content替换为width: 100%，这样每个容器都会占满网格列的宽度（即最宽列表项的宽度）：

.benefit_container {
  height: 28px;
  width: 100%; /* 替换原max-content */
  border-radius: 24px;
  margin-bottom: 12px;
  padding: 2px 8px;
  font-size: 16px;
  font-weight: 600;
  background-color: #f1e8dc;
  display: flex;
  align-items: center;
}

原理说明： #

grid-template-columns: max-content会让网格列的宽度自动适配列表中最宽的内容，子元素设置width:100%后，会完全继承这个列宽，从而实现所有容器宽度统一的效果。

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