网格行尾以显示时隙

Question

我试图显示使用CSS预订的时隙，并且在弄清楚如何正确使用grid-row-end时遇到困难

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