在CSS网格布局中更改颜色的背景色

Question

我需要一些帮助来更改显示中的列的背景色：网格 我尝试在.calendar中使用background-image，但是效果不好 如何更改特定列中的背景颜色？

我将带有SCSS的代码放入了Codepen https://codepen.io/henrique-abdala/pen/JQpyeZ

我需要这样的东西 example

.calendar {
  width: 100%;
}
.calendar .line {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  grid-gap: 2px 10px;
}
.calendar .space {
  display: contents;
  background-color: #ddd;
  /* if display contents, this won't color */
}
.calendar .week-day, .calendar .day-label, .calendar .event {
  padding: 4px 10px;
}
.calendar .event {
  background-color: #ccc;
}
.calendar .event-end {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.calendar .event-start {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.calendar [data-span-start="1"] {
  grid-column-start: 1;
}
.calendar [data-span-start="2"] {
  grid-column-start: 2;
}
.calendar [data-span-start="3"] {
  grid-column-start: 3;
}
.calendar [data-span-start="4"] {
  grid-column-start: 4;
}
.calendar [data-span-start="5"] {
  grid-column-start: 5;
}
.calendar [data-span-start="6"] {
  grid-column-start: 6;
}
.calendar [data-span-end="1"] {
  grid-column-end: span 1;
}
.calendar [data-span-end="2"] {
  grid-column-end: span 2;
}
.calendar [data-span-end="3"] {
  grid-column-end: span 3;
}
.calendar [data-span-end="4"] {
  grid-column-end: span 4;
}
.calendar [data-span-end="5"] {
  grid-column-end: span 5;
}
.calendar [data-span-end="6"] {
  grid-column-end: span 6;
}

<div class="calendar">
  <div class="line">
    <div class="line-day">10H</div>
    <div class="line-day">11H10</div>
    <div class="line-day">15H</div>
    <div class="line-day">16H10</div>
    <div class="line-day">19H30</div>
    <div class="line-day">20H40</div>
  </div>
  <div class="line">
    <div class="space">
      <h3  data-span-start="1" data-span-end="6">Sala 01</h3>
    </div>
  </div>
  <div class="line">
    <div class="space">
      <div class="event event-start event-end" data-span-start="1" data-span-end="1">Moda</div>
    </div>
    <div class="space">
      <div class="event event-start event-end" data-span-start="2" data-span-end="1">Design</div>
    </div>
    <div class="space">
      <div class="event event-start event-end" data-span-start="3" data-span-end="1">Design</div>
    </div>
    <div class="space">
      <div class="event event-start event-end" data-span-start="4" data-span-end="1">Escultura</div>
    </div>
    <div class="space">
      <div class="event event-start event-end" data-span-start="5" data-span-end="1">Design</div>
    </div>
    <div class="space">
      <div class="event event-start event-end" data-span-start="6" data-span-end="1">Fotografia</div>
    </div>
  </div>
  <div class="line">
    <div class="space">
      <h3  data-span-start="1" data-span-end="6">Sala 02</h3>
    </div>
  </div>
  <div class="line">
    <div class="space">
      <div class="event event-start event-end" data-span-start="1" data-span-end="2">Moda</div>
    </div>
    <div class="space">
      <div class="event event-start event-end" data-span-start="5" data-span-end="1">Design</div>
    </div>
    <div class="space">
      <div class="event event-start event-end" data-span-start="6" data-span-end="1">Fotografia</div>
    </div>
  </div>
  <div class="line">
    <div class="space">
      <h3  data-span-start="1" data-span-end="6">Sala 03</h3>
    </div>
  </div>
  <div class="line">
    <div class="space">
      <div class="event event-start event-end" data-span-start="2" data-span-end="2">Moda</div>
    </div>
    <div class="space">
      <div class="event event-start event-end" data-span-start="4" data-span-end="1">Design</div>
    </div>
  </div>
</div>