当内容变大时使CSS网格行增长

Question

我正在使用网格布局进行月视图，其中每周都是另一个网格布局。 对于每个事件，我使用像

grid-column: 5/span 2; top: 1rem;

这样的东西将事件分层在日历日之上，但是当事件数量太多时，它们就会溢出。

我可以在

section.week

上设置隐藏溢出，但随后事件就会被截断，这并没有更好。

当一周的事件开始溢出时，有没有办法让整个日历变大，即使这意味着必须上下滚动才能看到整个日历？ 也欢迎其他建议。

: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;
}

<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>

Answer 1

不要使用position:relative和top属性来放置事件，而是使用网格行来放置事件。默认情况下，网格项将根据需要堆叠并创建新行。删除为每个关闭（事件）指定的 grid-row: 1 。

: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;
    margin: 0.5rem 0 0.5rem 1px;
    padding: 0.25rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

HTML 更改： 从每个section.closure中删除grid-row: 1。而且您也不需要再为它们指定顶级属性。