How to create timetable in CSS using Grid? - html

Question

I am trying to recreate this picture using CSS grid.
However I do not know how to properly create elements that span across multiple colums.
This is the code I have right now.
<div class="Grid">
<div class="Grid-Column">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
<div class="column">6</div>
</div>
<div class="Grid-Rows">
<div class="row">Monday</div>
<div class="row">Tuesday</div>
<div class="row">Wednesday</div>
<div class="row">Thursday</div>
<div class="row">Friday</div>
</div>
<div class="Grid-Element">
<div>A</div>
<div>B</div>
<div>C</div>
<div>E</div>
<div>F</div>
</div>
</div>

Answer 1

I'm not sure if this is the best method. Anyway, try it:
.Grid {
width: 700px;
height: 500px;
border: 2px solid red;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(6, 1fr);
}
.pondeli {
grid-row-start: 2;
grid-row-end: 3;
}
.Utery {
grid-row-start: 3;
grid-row-end: 4;
}
.Streda {
grid-row-start: 4;
grid-row-end: 5;
}
.Ctvrtek {
grid-row-start: 5;
grid-row-end: 6;
}
.Patek {
grid-row-start: 6;
grid-row-end: 7;
}
.a {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 3;
grid-column-end: 5;
}
.b {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 7;
grid-column-end: 8;
}
.c {
grid-row-start: 4;
grid-row-end: 5;
grid-column-start: 4;
grid-column-end: 5;
}
.d {
grid-row-start: 4;
grid-row-end: 5;
grid-column-start: 5;
grid-column-end: 6;
}
.e {
grid-row-start: 5;
grid-row-end: 6;
grid-column-start: 2;
grid-column-end: 3;
}
.f {
grid-row-start: 5;
grid-row-end: 6;
grid-column-start: 5;
grid-column-end: 7;
}
<div class="Grid">
<div></div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div class="pondeli">Pondeli</div>
<div class="Utery">Utery</div>
<div class="Streda">Streda</div>
<div class="Ctvrtek">Ctvrtek</div>
<div class="Patek"></div>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
<div class="f">F</div>
</div>