How to create timetable in CSS using Grid?

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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

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

<!-- end snippet -->

I'm not sure if this is the best method. Anyway, try it:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->