你的需求是列数不固定、列最小宽度由li内容决定、最大宽度填满固定宽度的ul容器，CSS Grid完全能搞定，甚至代码还特别简洁。下面给你详细的实现步骤和代码：

核心思路 #

把<ul>作为Grid容器，利用Grid的自适应列特性：

• 用auto-fill让浏览器自动计算能容纳多少列
• 用minmax(min-content, 1fr)定义列宽规则：最小宽度是li内容的最小所需宽度（比如"333"会比"1"宽），最大宽度平分容器剩余空间，确保填满整个ul

完整代码示例 #

HTML（先修正原标签的闭合问题） #

<ul class="adaptive-grid">
  <li>1</li>
  <li>1</li>
  <li>22</li>
  <li>1</li>
  <li>1</li>
  <li>333</li>
  <li>1</li>
  <li>1</li>
  <li>22</li>
  <li>1</li>
  <li>1</li>
</ul>

CSS #

.adaptive-grid {
  width: 500px; /* 这里设置你需要的固定宽度 */
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* 核心属性，实现自适应列 */
  grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));
  gap: 8px; /* 可选：添加列/行间距，让布局更美观 */
}

.adaptive-grid li {
  border: 1px solid #ddd; /* 可选：加边框模拟表格单元格效果 */
  padding: 8px;
  text-align: center;
}

关键属性解释 #

• auto-fill：浏览器会根据容器宽度，自动计算能放下多少列，尽可能多的排列元素
• minmax(min-content, 1fr)：
  • min-content：列的最小宽度由li里的内容决定（比如内容是"333"，列宽就至少能放下这三个字符）
  • 1fr：当容器宽度有剩余空间时，列会平分这些空间，直到填满整个ul
• 如果想要最后一行的元素自动扩展填满整行，可以把auto-fill换成auto-fit，两者的区别是auto-fit会合并空列的位置，让现有元素占满容器宽度

备选方案：Flexbox #

如果你更习惯用Flexbox，也能实现类似效果，不过逻辑不如Grid直观：

.adaptive-grid {
  width: 500px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.adaptive-grid li {
  flex: 1 0 min-content; /* 允许元素扩展，但最小宽度由内容决定 */
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

不过Flex的缺点是，当最后一行元素数量不足时，这些元素会自动扩展填满整行，而Grid的auto-fill方案会保持列宽和前面一致，空出的位置留着，你可以根据需求选择。

总的来说，CSS Grid是最贴合你需求的方案，代码简洁，效果可控，完全能实现你要的表格式自适应网格。

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