使用网格CSS制定时间表

Question

你好，我正在使用CSS Grid，所以请不要对我苛刻:-)。我在网上找到了一个很不错的时间表，这是URL：https://codepen.io/liquidlight/pen/agymdX，我正在尝试调整布局以适合我的需要。

这是我的代码：

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 4rem 0;
    font-family: -system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.scheduleContainer {
    display: grid;
    grid-gap: 0.2rem;
    grid-template-columns: 5rem repeat(4, 1fr);
    grid-template-rows: repeat(28, 1fr);
    grid-template-areas: "time800 stage stage stage stage" "time830 stage stage stage stage" "time900 stage stage stage stage" "time930 stage stage stage stage" "time1000 stage stage stage stage" "time1030 stage stage stage stage" "time1100 stage stage stage stage" "time1130 stage stage stage stage" "time1200 stage stage stage stage" "time1230 stage stage stage stage" "time1300 stage stage stage stage" "time1330 stage stage stage stage" "time1400 stage stage stage stage" "time1430 stage stage stage stage" "time1500 stage stage stage stage" "time1530 stage stage stage stage" "time1600 stage stage stage stage" "time1630 stage stage stage stage" "time1700 stage stage stage stage" "time1730 stage stage stage stage" "time1800 stage stage stage stage" "time1830 stage stage stage stage" "time1900 stage stage stage stage" "time1930 stage stage stage stage" "time2000 stage stage stage stage" "time2030 stage stage stage stage" "time2100 stage stage stage stage" "time2130 stage stage stage stage";
}

/**
   * Time
   */

.time {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-top: thin dotted #ccc;
    height: 100%;
    padding: 0 0.5rem;
}

.time.start-800 {
    grid-area: time800;
}

.time.start-830 {
    grid-area: time830;
}

.time.start-900 {
    grid-area: time900;
}

.time.start-930 {
    grid-area: time930;
}

.time.start-1000 {
    grid-area: time1000;
}

.time.start-1030 {
    grid-area: time1030;
}

.time.start-1100 {
    grid-area: time1100;
}

.time.start-1130 {
    grid-area: time1130;
}

.time.start-1200 {
    grid-area: time1200;
}

.time.start-1230 {
    grid-area: time1230;
}

.time.start-1300 {
    grid-area: time1300;
}

.time.start-1330 {
    grid-area: time1330;
}

.time.start-1400 {
    grid-area: time1400;
}

.time.start-1430 {
    grid-area: time1430;
}

.time.start-1500 {
    grid-area: time1500;
}

.time.start-1530 {
    grid-area: time1530;
}

.time.start-1600 {
    grid-area: time1600;
}

.time.start-1630 {
    grid-area: time1630;
}

.time.start-1700 {
    grid-area: time1700;
}

.time.start-1730 {
    grid-area: time1730;
}

.time.start-1800 {
    grid-area: time1800;
}

.time.start-1830 {
    grid-area: time1830;
}

.time.start-1900 {
    grid-area: time1900;
}

.time.start-1930 {
    grid-area: time1930;
}

.time.start-2000 {
    grid-area: time2000;
}

.time.start-2030 {
    grid-area: time2030;
}

.time.start-2100 {
    grid-area: time2100;
}

.time.start-2130 {
    grid-area: time2130;
}

.time[class*="30"]:not(.start-1300) {
    font-size: 0.8rem;
    color: #ccc;
}

/**
   * Event
   */

.event {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0.5rem 1rem;
    background-color: orange;
    border-radius: 0.2rem;
    font-size: 0.8rem;
    font-weight: bold;
    line-height: 1.4;
}

.event span {
    display: block;
    width: 100%;
    font-size: 0.8em;
    font-weight: normal;
}

.event.start-800 {
    grid-row-start: time800;
}

.event.start-830 {
    grid-row-start: time830;
}

.event.start-900 {
    grid-row-start: time900;
}

.event.start-930 {
    grid-row-start: time930;
}

.event.start-1000 {
    grid-row-start: time1000;
}

.event.start-1030 {
    grid-row-start: time1030;
}

.event.start-1100 {
    grid-row-start: time1100;
}

.event.start-1130 {
    grid-row-start: time1130;
}

.event.start-1200 {
    grid-row-start: time1200;
}

.event.start-1230 {
    grid-row-start: time1230;
}

.event.start-1300 {
    grid-row-start: time1300;
}

.event.start-1330 {
    grid-row-start: time1330;
}

.event.start-1400 {
    grid-row-start: time1400;
}

.event.start-1430 {
    grid-row-start: time1430;
}

.event.start-1500 {
    grid-row-start: time1500;
}

.event.start-1530 {
    grid-row-start: time1530;
}

.event.start-1600 {
    grid-row-start: time1600;
}

.event.start-1630 {
    grid-row-start: time1630;
}

.event.start-1700 {
    grid-row-start: time1700;
}

.event.start-1730 {
    grid-row-start: time1730;
}

.event.start-1800 {
    grid-row-start: time1800;
}

.event.start-1830 {
    grid-row-start: time1830;
}

.event.start-1900 {
    grid-row-start: time1900;
}

.event.start-1930 {
    grid-row-start: time1930;
}

.event.start-2000 {
    grid-row-start: time2000;
}

.event.start-2030 {
    grid-row-start: time2030;
}

.event.start-2100 {
    grid-row-start: time2100;
}

.event.start-2130 {
    grid-row-start: time2130;
}

.event.end-800 {
    grid-row-end: time800;
}

.event.end-830 {
    grid-row-end: time830;
}

.event.end-900 {
    grid-row-end: time900;
}

.event.end-930 {
    grid-row-end: time930;
}

.event.end-1000 {
    grid-row-end: time1000;
}

.event.end-1030 {
    grid-row-end: time1030;
}

.event.end-1100 {
    grid-row-end: time1100;
}

.event.end-1130 {
    grid-row-end: time1130;
}

.event.end-1200 {
    grid-row-end: time1200;
}

.event.end-1230 {
    grid-row-end: time1230;
}

.event.end-1300 {
    grid-row-end: time1300;
}

.event.end-1330 {
    grid-row-end: time1330;
}

.event.end-1400 {
    grid-row-end: time1400;
}

.event.end-1430 {
    grid-row-end: time1430;
}

.event.end-1500 {
    grid-row-end: time1500;
}

.event.end-1530 {
    grid-row-end: time1530;
}

.event.end-1600 {
    grid-row-end: time1600;
}

.event.end-1630 {
    grid-row-end: time1630;
}

.event.end-1700 {
    grid-row-end: time1700;
}

.event.end-1730 {
    grid-row-end: time1730;
}

.event.end-1800 {
    grid-row-end: time1800;
}

.event.end-1830 {
    grid-row-end: time1830;
}

.event.end-1900 {
    grid-row-end: time1900;
}

.event.end-1930 {
    grid-row-end: time1930;
}

.event.end-2000 {
    grid-row-end: time2000;
}

.event.end-2030 {
    grid-row-end: time2030;
}

.event.end-2100 {
    grid-row-end: time2100;
}

.event.end-2130 {
    grid-row-end: time2130;
}

.event.length-1 {
    grid-column-end: span 1;
}

.event.length-2 {
    grid-column-end: span 2;
}

.event.length-3 {
    grid-column-end: span 3;
}

.event.length-4 {
    grid-column-end: span 4;
}

.event.stage-earth {
    background-color: #FFA726;
}

.event.stage-mercury {
    background-color: #9CCC65;
}

.event.stage-venus {
    background-color: #FF8A65;
}

.event.stage-mars {
    background-color: #B3E5FC;
}

.event.stage-jupiter {
    background-color: #81D4FA;
}

.event.stage-saturn {
    background-color: #26C6DA;
}

<div class="scheduleContainer">

    <!-- TIMES -->
    <div class="time start-800">8:00</div>
    <div class="time start-830">8:30</div>
    <div class="time start-900">9:00</div>
    <div class="time start-930">9:30</div>
    <div class="time start-1000">10:00</div>
    <div class="time start-1030">10:30</div>
    <div class="time start-1100">11:00</div>
    <div class="time start-1130">11:30</div>
    <div class="time start-1200">12:00</div>
    <div class="time start-1230">12:30</div>

    <!-- EVENTS -->
    <div class="event stage-saturn start-800 end-830 length-4">Arrival and registration <span>Registration
                Area</span></div>
    <div class="event stage-mercury start-900 end-1030 length-1">Speaker Five <span>Mercury Stage</span></div>
    <div class="event stage-venus start-900 end-1030 length-2">Speaker Six <span>Venus Stage</span></div>
    <div class="event stage-mars start-900 end-1030 length-1">Speaker Seven <span>Mars Stage</span></div>
<h2>
Awesome title
</h2>
    <div class="event stage-mercury start-1100 end-1200 length-1">Speaker Five <span>Mercury Stage</span></div>
    <div class="event stage-venus start-1100 end-1200 length-1">Speaker Six <span>Venus Stage</span></div>
    <div class="event stage-mars start-1100 end-1200 length-1">Speaker Seven <span>Mars Stage</span></div>
    <div class="event stage-mars start-1100 end-1200 length-1">Speaker Seven <span>Mars Stage</span></div>

</div>

我想要达到的目的是在事件之间添加一些标题部分，以便我可以解释一些部分，因为我仍在学习网格，所以我无法实现。这就是我所说的：

有人可以帮忙吗？jsfiddle也在这里：https://jsfiddle.net/mvak0r9n/

Answer 1

也许您需要添加另一行？

    <tr>
        <td></td>
        <td colspan="4" style="font-size:20px;">Awesome title!</td>
    </tr>

https://codepen.io/yakupov112/pen/jOPMzGe