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>