CSS Flexbox/Grid实现按天分组项的动态列换行响应式布局

我有若干按天分组的项目，希望以列布局展示保证可读性，但项目过多时列会向右溢出。目前只能通过JS统计项目并拆分为多行弹性换行列，不够优雅。能否仅用Flexbox或Grid实现动态列换行的响应式效果？

预期效果示例 #

Day 1   - Item  - Item
- Item  - Item  Day 4
- Item  Day 3   - Item
- Item  - Item  - Item
- Item  - Item  Day 5
Day 2   - Item  - Item
- Item  - Item  - Item


- Item  -Item    ...
- Item  ...
Day 6
- Item
- Item
- Item
- Item

当前实现代码 #

HTML #

<div class="container">
    <div class="day">Day 1</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="day">Day 2</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="day">Day 3</div>
    <div class="item">Item</div>
    ...
</div>

CSS #

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 150px;
}    

解决方案 #

方法一：Flexbox 动态高度适配（响应式换行） #

当前写法的核心问题是固定了max-height，无法自适应容器宽度调整列数。可以通过以下优化实现自动换行：

.container {
    display: flex;
    flex-flow: column wrap;
    min-height: 100px;
    max-height: 90vh; /* 基于视口高度动态限制 */
    overflow-y: auto;
    gap: 8px; /* 增加间距提升可读性 */
}

.day {
    font-weight: bold;
    width: 120px; /* 固定日期列宽度，保证分组对齐 */
}

.item {
    width: 120px; /* 项目列宽度与日期列统一 */
}

这种写法会在容器高度耗尽时自动向右新增列，同时通过overflow-y: auto避免内容溢出视口，完全无需JS介入。

方法二：Grid 流式列布局（更灵活的响应式） #

CSS Grid的自动填充特性可以根据容器宽度动态调整列数，完美适配响应式场景：

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    max-height: 90vh;
    overflow-y: auto;
}

.day {
    font-weight: bold;
    grid-column: span 1; /* 日期固定占1列 */
}

.item {
    grid-column: span 1; /* 项目固定占1列 */
}

Grid方案无需依赖固定高度，完全根据容器宽度生成列数：容器变窄时自动减少列数、增加行数，容器变宽时则新增列数，适配各种屏幕尺寸。

关键优化点 #

• 给.day和.item设置统一最小宽度，保证列对齐
• 使用gap替代margin，避免布局间距混乱
• 利用max-height和overflow-y: auto控制容器高度，防止内容溢出视口
• Flexbox更适合需要严格垂直顺序排列的场景，Grid则更适合全响应式列数需求

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