<div class="lessons-per-grid-day">
<div class="lessons-per-time">14:00</div>
<div class="body-table-block-lesson" style="grid-row: span 2;">
<b>что-то</b> (14:00 - 14:50)
</div>
<div class="body-table-block-lesson" style="grid-row: span 2;">
<b>что-то</b> (14:00 - 14:50)
</div>
<div class="body-table-block-lesson" style="grid-row: span 3;">
<b>что-то</b> (14:00 - 15:20)
</div>
<div class="lessons-per-time">14:30</div>
<div class="lessons-per-time">15:00</div>
<div class="body-table-block-lesson" style="grid-row: span 2;">
<b>что-то</b> (15:00 - 15:50)
</div>
<div class="lessons-per-time">15:30</div>
<div class="body-table-block-lesson" style="grid-row: span 2;">
<b>что-то</b> (15:30 - 16:20)
</div>
<div class="lessons-per-time">16:00</div>
<div class="body-table-block-lesson" style="grid-row: span 1;">
<b>что-то</b> (16:00 - 16:20)
</div>
</div>
.lessons-per-grid-day{
display: grid;
grid-template-columns: 85px repeat(auto-fit, minmax(100px, 1fr));
padding-top: 35.5px;
}
.lessons-per-time {
grid-column: 1;
}
.body-table-block-lesson{
box-sizing: border-box;
border-width: 1px 1px 6px;
border-style: solid;
padding: 1px;
border-bottom-left-radius: 5px;
font-size: 0.8em;
cursor: pointer;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.