能否用grid-template-columns定义最少2列（每列最小200px）并自适应子元素数量？

当然可以实现，你需要结合repeat()、auto-fill和minmax()这几个Grid属性，再配合容器最小宽度来保证最少2列的要求。

修改后的代码示例 #

ul.menu {
    display: grid; 
    /* 核心设置：自动填充列，每列最小200px，最大等分剩余空间 */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 1px;
    overflow: hidden;
    /* 确保容器最少能放下2列，避免宽度不足时收缩为1列 */
    min-width: 400px;
} 

li {
    height: 200px;
    /* 移除固定width，让Grid列控制宽度，避免布局溢出 */
}

<ul class="menu">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
  <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
  <li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>

原理说明 #

• repeat(auto-fill, minmax(200px, 1fr))：
  • auto-fill会根据容器的可用宽度，自动计算能容纳多少个列，当子元素数量超过当前列数时，会自动新增列来适配。
  • minmax(200px, 1fr)定义了每列的宽度范围：最小宽度为200px，最大宽度为等分容器剩余空间（1fr），保证列宽在空间足够时能均匀扩展。
• min-width: 400px：
  强制容器宽度至少为2个列的最小宽度之和（2×200px），确保无论容器多窄，都能保持最少2列的布局。如果希望在容器宽度不足时允许横向滚动，可以将overflow: hidden改为overflow-x: auto。

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