Изменить цвет фона в CSS Grid Layout - PullRequest
Новая
       14

Изменить цвет фона в CSS Grid Layout

1 голос
/ 30 июня 2019

Мне нужна помощь для изменения цвета фона столбца на дисплее: grid Я пытался использовать background-image в .calendar, но результат не очень хороший. Как мне изменить цвет фона в определенном столбце?

Я положил код с SCSS в codepen https://codepen.io/henrique-abdala/pen/JQpyeZ

мне нужно что-то вроде этого пример 

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