CSS网格-使网格下降而不是跨越五个相等的列

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的情况下开始下一行？

西蒙（Simon）

Answer 1

<?xml version="1.0" encoding="UTF-8"?> <entity-mappings version="2.0" xmlns="http://java.sun.com/xml/ns/persistence/orm" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/persistence/orm http://java.sun.com/xml/ns/persistence/orm_2_0.xsd"> <named-native-query name="getCurrentDateAndTimeFromDatabase"> <query>SELECT CURRENT_TIMESTAMP</query> </named-native-query> </entity-mappings> 希望您定义网格的每一行。定义grid-template-rows时，这意味着网格将具有“高度为14px的一行”。

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

您没有提供完整的代码，但我认为您还必须将较小的div的14px设置为height

我已经建立了一个示例，每列仅3行（因此代码不会产生很大的麻烦）

25%

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