конец строки сетки для отображения временных интервалов

Question

Я пытаюсь показать временные интервалы, забронированные с использованием CSS, и у меня возникают проблемы с выяснением того, как правильно использовать конец строки сетки

.row {
display: grid;
grid-template-columns: auto repeat(14, 50px) auto;
grid-gap: 1px;
background-color: #CCC;
padding: 1px;
}
[data-span="1"] { grid-row-end: span 1; }
[data-span="2"] { grid-row-end: span 2; }
[data-span="3"] { grid-row-end: span 3; }
[data-span="4"] { grid-row-end: span 4; }
[data-span="5"] { grid-row-end: span 5; }
[data-span="6"] { grid-row-end: span 6; }
[data-span="7"] { grid-row-end: span 7; }

https://codepen.io/joe420/pen/dgyYjq

Answer 1

На самом деле вы делаете каждую строку контейнером сетки, вместо этого вам нужно сделать весь календарь сеткой.Принимая во внимание это решение, вам нужно будет также удалять несколько пустых ячеек каждый раз, когда у вас есть ячейка большего размера.

.grid-container {
  display: grid;
  grid-template-columns: auto repeat(14, 50px) auto;
  grid-gap: 1px;
  background-color: #CCC;
  padding: 1px;
}

.slot {
  background-color: #333;
  text-align: center;
  padding: 5px;
  font-size: 15px;
  color: #FFF;
}

.booked {
  background: #FF0000
}

.label {
  text-align: center;
  border: 1px solid #000;
}

[data-span="1"] {
  grid-row-end: span 1;
}

[data-span="2"] {
  grid-row-end: span 2;
}

[data-span="3"] {
  grid-row-end: span 3;
}

[data-span="4"] {
  grid-row-end: span 4;
}

[data-span="5"] {
  grid-row-end: span 5;
}

[data-span="6"] {
  grid-row-end: span 6;
}

[data-span="7"] {
  grid-row-end: span 7;
}

<div class="grid-container">
    <div class="time">&nbsp</div>
    <div class="label">Slot</div>
    <div class="label">Slot</div>
    <div class="label">Slot</div>
    <div class="label">Slot</div>
    <div class="label">Slot</div>
    <div class="label">Slot</div>
    <div class="label">Slot</div>
    <div class="label">Slot</div>
    <div class="label">Slot</div>
    <div class="label">Slot</div>
    <div class="label">Slot</div>
    <div class="label">Slot</div>
    <div class="label">Slot</div>
    <div class="label">Slot</div>
    <div class="time">&nbsp</div>
    <div class="time">1AM</div>
    <div class="slot">&nbsp</div>
    <div class="booked" data-span="3">Booked</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="time">1AM</div>
    <div class="time">2AM</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="time">2AM</div>
    <div class="time">3AM</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="time">3AM</div>
    <div class="time">4AM</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="time">4AM</div>
    <div class="time">5AM</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="time">5AM</div>
    <div class="time">6AM</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="slot">&nbsp</div>
    <div class="time">6AM</div>
</div>