css grid - 将网格向下移动而不是跨越五个相等的列

Question

我在Aurelia工作并有一个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？

西蒙

Answer 1

grid-template-rows希望您定义网格的每一行。当您定义grid-template-rows: 14px时，这意味着您的网格将具有“一行14px高度”。

你应该将grid-template-rows设置为repeat(12, 14px)，这与写14px 12次相同。

你没有给出整个代码，但我认为你还必须将那些较小的div的height设置为25%

我已经设置了一个示例，每列只有3行（因此代码不会很大）

 .calendar {
  display: grid;
  grid-template-columns: repeat(5, 60px);
  grid-template-rows: repeat(3, 14px);
  grid-auto-flow: column;
}

.row {
  border-bottom: 1px solid gray;
  border-right: 1px dashed lightgray;
}

<div class="calendar">
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
</div>