如何让CSS Grid容器根据子元素数量自动生成250px宽度的对应列

你可以通过CSS Grid自带的自动流和自动列配置实现该需求，完全不需要JS介入，修改后的.container样式如下：

.container {
   display: grid;
   /* 移除原有固定的grid-template-columns配置 */
   grid-auto-flow: column; /* 子元素自动沿列方向排列，超出模板数量时自动新增列 */
   grid-auto-columns: 250px; /* 所有自动生成的列宽度统一为250px */
   grid-template-rows: 50px;
}

属性说明 #

• grid-auto-flow: column 会让Grid容器的子元素默认沿水平列方向排列，只要有新增的.child元素，容器就会自动生成新的列来容纳，不会自动换行
• grid-auto-columns: 250px 会指定所有自动生成的列的宽度固定为250px，不管.child数量怎么变化，每一列的宽度都会符合要求
• 原有.child的样式不需要做任何修改

可选配置：如果需要列之间增加间距，直接在.container中添加gap: 10px（数值按需调整）即可。

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