Блог

Я работаю в Aurelia, и у меня есть файл css, в котором я установил css для этого.

Я пытаюсь создать макет календаря недели, в котором у меня есть часовые ячейки, разбитые на наборы по 4 (четверть часа) и заполняющие страницу вниз. Например, скажем, у меня было 45 разделов, которые равняются 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;

}
 

Я рассмотрел другие решения и ряд руководств по этому вопросу, но на данный момент я получаю один длинный столбец. который не переходит к следующему столбцу.

Как мне заставить divs заполняться, скажем, до 12-й строки, а затем начинать со следующего столбца, а затем следующего, учитывая правильное количество divs?

Саймон

grid-template-rows ожидается, что вы определите каждую строку сетки. Когда вы определили grid-template-rows: 14px , это означает, что ваша сетка будет иметь «одну строку высотой 14 пикселей».

Вы должны установить grid-template-rows repeat(12, 14px) значение, которое совпадает с записью 14px 12 раз.

Вы не предоставили весь код, но я думаю, вам также придется установить height для этих меньших divs значение 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>