如何让CSS Grid行随内容增多自动扩展？日历场景技术求助

问题描述 #

我使用CSS Grid布局实现月视图日历，每周为独立的Grid布局。通过grid-column: 5/span 2; top: 1rem;这类代码将事件层叠在日期上方，但事件数量过多时会出现溢出问题。给section.week设置overflow: hidden会截断事件，体验不佳。希望让日历整体高度随周内溢出事件自动扩展，支持上下滚动查看完整内容，也接受其他解决方案。

代码示例 #

CSS #

:host {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

section.month {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    grid-auto-rows: 1fr;
    border: 1px solid black;
}

section.week {
    display: grid;
    grid-template-columns: min-content repeat(7, 1fr);
    border: 1px solid orange;
}

section.week > * + * {
    border-left: 1px solid black;
}

section.week > * {
    border-top: 1px solid black;
}

section.closure {
    background-color: red;
    color: white;
    border: 1px red;
    align-self: baseline;
    position: relative;
    margin: 0.5rem 0 0.5rem 1px;
    padding: 0.25rem;
    grid-row: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

HTML #

<section class="month">
    <section class="week">
        <div class="week-of-year">
            32
        </div>
        <div class="day past" style="grid-column: 2/span 1; grid-row: 1">
            <div class="day-number">.</div>
        </div>
        <div class="day past" style="grid-column: 3/span 1; grid-row: 1">
            <div class="day-number">.</div>
        </div>
        <div class="day past" style="grid-column: 4/span 1; grid-row: 1">
            <div class="day-number">.</div>
        </div>
        <div class="day past" style="grid-column: 5/span 1; grid-row: 1">
            <div class="day-number">.</div>
        </div>
        <div class="day past" style="grid-column: 6/span 1; grid-row: 1">
            <div class="day-number">.</div>
        </div>
        <div class="day past" style="grid-column: 7/span 1; grid-row: 1">
            <div class="day-number">.</div>
        </div>
        <div class="day past" style="grid-column: 8/span 1; grid-row: 1">
            <div class="day-number">.</div>
        </div>
    </section>
    <section class="week">
        <div class="week-of-year">
            33
        </div>
        <div class="day past" style="grid-column: 2/span 1; grid-row: 1">
            <div class="day-number">14</div>
        </div>
        <div class="day past" style="grid-column: 3/span 1; grid-row: 1">
            <div class="day-number">15</div>
        </div>
        <div class="day past" style="grid-column: 4/span 1; grid-row: 1">
            <div class="day-number">16</div>
        </div>
        <div class="day past" style="grid-column: 5/span 1; grid-row: 1">
            <div class="day-number">17</div>
        </div>
        <div class="day past" style="grid-column: 6/span 1; grid-row: 1">
            <div class="day-number">18</div>
        </div>
        <div class="day past" style="grid-column: 7/span 1; grid-row: 1">
            <div class="day-number">19</div>
        </div>
        <div class="day past" style="grid-column: 8/span 1; grid-row: 1">
            <div class="day-number">20</div>
        </div>

        <section class="closure" style="grid-column: 5/span 2; top: 1rem;">
            Some text
        </section>
        <section class="closure" style="grid-column: 3/span 3; top: 3.5rem;">
            Some other text
        </section>
        <section class="closure" style="grid-column: 3/span 3; top: 6rem;">
            Some more text
        </section>
        <section class="closure" style="grid-column: 3/span 3; top: 8.5rem;">
            More irrelevant text
        </section>
        <section class="closure" style="grid-column: 3/span 3; top: 11rem;">
            Some other text
        </section>
    </section>
    <section class="week">
        <div class="week-of-year">
            34
        </div>
        <div class="day past" style="grid-column: 2/span 1; grid-row: 1">
            <div class="day-number">.</div>
        </div>
        <div class="day past" style="grid-column: 3/span 1; grid-row: 1">
            <div class="day-number">.</div>
        </div>
        <div class="day past" style="grid-column: 4/span 1; grid-row: 1">
            <div class="day-number">.</div>
        </div>
        <div class="day past" style="grid-column: 5/span 1; grid-row: 1">
            <div class="day-number">.</div>
        </div>
        <div class="day past" style="grid-column: 6/span 1; grid-row: 1">
            <div class="day-number">.</div>
        </div>
        <div class="day past" style="grid-column: 7/span 1; grid-row: 1">
            <div class="day-number">.</div>
        </div>
        <div class="day past" style="grid-column: 8/span 1; grid-row: 1">
            <div class="day-number">.</div>
        </div>
    </section>
</section>

解决方案 #

方法1：用Grid行自适应替代手动定位 #

当前事件使用position: relative+top手动定位，导致Grid容器无法感知事件高度，无法自动扩展。修改思路：

1. 让.week的行高度自适应内容
2. 移除事件的相对定位，改用grid-row控制垂直位置

修改后的核心CSS：

section.week {
    display: grid;
    grid-template-columns: min-content repeat(7, 1fr);
    border: 1px solid orange;
    grid-auto-rows: min-content; /* 行高自适应内容 */
    gap: 0.5rem; /* 可选：事件间添加间距 */
}

section.closure {
    background-color: red;
    color: white;
    border: 1px solid red; /* 修正原代码border语法错误 */
    padding: 0.25rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /* 移除position: relative和top */
}

然后给每个事件设置对应的grid-row，比如第一个事件设grid-row: 2，第二个设grid-row:3，以此类推。Grid会自动计算行高，.week容器会随事件数量扩展，整个日历高度也会自适应，超出视口时可滚动查看。

方法2：给日历容器添加滚动机制 #

如果想保留现有定位方式，可通过以下方式实现滚动：

1. 让.month高度随内容自适应
2. 给宿主容器设置固定高度并开启垂直滚动

修改后的核心CSS：

:host {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 固定容器高度，比如占满视口 */
    overflow-y: auto; /* 内容超出时显示滚动条 */
}

section.month {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    grid-auto-rows: min-content; /* 周容器高度自适应内容 */
    border: 1px solid black;
}

这样.week会根据内部事件的总高度自动扩展，.month高度随内容变化，超出:host高度时自动出现滚动条。

补充说明 #

• 原代码中.closure的border:1px red语法错误，需改为border:1px solid red
• 方法1更适合需要规范布局的场景，Grid能更好地管理事件的垂直堆叠；方法2适合快速适配现有代码结构

内容的提问来源于stack exchange，提问作者Jan Vladimir Mostert