CSS网格-使网格向下,而不是穿过五个相等的列

我在奥雷利亚工作,有一个CSS文件,我在其中为这个设置了CSS。

我正在尝试构建一个周日历布局,其中,我将小时单元格拆分为4组(四分之一小时),并在页面中填充。例如,假设我有45个div,相当于向下8个单元格,向下5个单元格。

相反,我有:

它只是沿着一列向下流动,而没有转到下一列。

我的情况如下:

<div class="cal-container">
    <div>
        <div class="au-target cal-today cal-border-right cal-quarter-hour" au-target-id="32"></div>
        <div class="au-target cal-today cal-border-right cal-half-hour" au-target-id="32"></div>
       <div class="au-target cal-today cal-border-right cal-quarter-hour" au-target-id="32"></div>
       <div class="au-target cal-today cal-border-right cal-hour" au-target-id="32"></div>.......

我想让CSS强制沿着列向下流动,首先到达一个端点,然后继续沿着下一列向下流动,依此类推,超过5列。这是我的CSS。

    .cal-container {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: auto auto auto auto auto;
    grid-template-rows: 14px;
    border: 1px solid #bbb;
    grid-auto-flow: column;
}

.cal-quarter-hour {
    border-bottom: 1px dotted #ddd;
    height: 100%;
}

.cal-half-hour {
    border-bottom: 1px dotted #bbb;
    height: 100%;
}

.cal-hour {
    border-bottom: 1px solid #bbb;
    height: 100%;
}

.cal-border-right {
    border-right: 0.5px solid #ccc;
    height: 100%;
}

.cal-today {
    background-color: #ffffcc;

}

我看过其他的解决方案和很多关于这个的教程,但是现在我得到了一个很长的专栏。不会移动到下一列。

如何使div向下填充到,例如,第12行,然后从下一列开始,然后下一列给出正确的div数?

西蒙