CSS Grid实现动态列数且不超出父容器宽度的方案

要搞定Grid项目适配容器、超出自动换行，同时满足你提的三个要求，直接调整现有CSS即可，具体实现如下：

关键修改说明 #

• 移除grid-auto-flow: column，改用grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))。这个规则会自动根据容器宽度计算可容纳的列数，当项目数量超出时自动换行
• 给ul添加margin: 0 auto实现Grid容器在section内水平居中，同时加上padding: 0清除列表默认内边距
• 所有项目高度一致无需额外设置，Grid默认的align-items: stretch会让所有列高度统一，配合a标签的min-height: 100%，能保证内容填满项目高度

修改后的完整代码 #

CSS #

section {
  max-width: 500px;
  min-height: 50px;
  background: gray;
  margin: 10px 0; /* 增加间距方便区分两个示例 */
}

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 5px;
  list-style-type: none;
  background: red;
  margin: 0 auto; /* 水平居中 */
  padding: 5px; /* 避免项目贴容器边缘 */
}

li {
  background: yellow;
}

a {
  display: block;
  min-height: 100%;
  padding: 5px;
  color: inherit;
  text-decoration: none;
}

HTML #

<section>
  <ul>
    <li><a>item 1</a></li>
    <li><a>item 2</a></li>
  </ul>
</section>

<section>
  <ul>
    <li><a>item 1</a></li>
    <li><a>item 2</a></li>
    <li><a>item 3</a></li>
    <li><a>item 4</a></li>
    <li><a>item 5</a></li>
  </ul>
</section>

效果验证 #

1. 第二个示例的5个项目会在500px容器中自动换行成3行（2个+2个+1个）
2. Grid容器在section内左右内边距相等，完全水平居中
3. 所有li项目高度完全一致，不受内容多少影响

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