html - 如何将网格项的子元素重叠到下一列？

Question

所以，我想建立一个显示当前月份的日历。所以我用 css 网格构建日历。现在我想添加事件，持续时间可能超过一天(a 是一个网格项)。我现在面临的问题是，应该显示我的事件的 div 元素是网格项的子元素，所以我不能只添加 grid-column: span 2; 来调整多天的事件长度。网格项(即一个月中的某天)的子项如何重叠到下一个日历日？

编辑:将宽度调到 200% 是一个解决方案，但第二天的事件将与当前事件不一致。最迟，在调整窗口大小时，这两条线将不再对齐。

我快速模拟了我的元素以更直观地显示问题: https://codepen.io/eliasroebl/pen/yLMXOwy

<div class="Calendar calendar">
  <div class="calendar__header">
    <div>Monday</div>
    <div>Tuesday</div>
    <div>Wednesday</div>
    <div>Thursday</div>
    <div>Friday</div>
    <div>Saturday</div>
    <div>Sunday</div>
  </div>
  <div class="calendar__week">
    <div class="calendar__day day">1</div>
    <div class="calendar__day day">2</div>
    <div class="calendar__day day">3</div>
    <div class="calendar__day day">4</div>
    <div class="calendar__day day">5</div>
    <div class="calendar__day day">6</div>
    <div class="calendar__day day">7</div>
  </div>
  <div class="calendar__week">
    <div class="calendar__day day">8</div>
    <div class="calendar__day day">9
      <div class="event">
        Event 1
      </div>
    </div>
    <div class="calendar__day day">10</div>
    <div class="calendar__day day">11</div>
    <div class="calendar__day day">12</div>
    <div class="calendar__day day">13</div>
    <div class="calendar__day day">14</div>
  </div>
  <div class="calendar__week">
    <div class="calendar__day day">15</div>
    <div class="calendar__day day">16</div>
    <div class="calendar__day day">17</div>
    <div class="calendar__day day">18</div>
    <div class="calendar__day day">19</div>
    <div class="calendar__day day">20</div>
    <div class="calendar__day day">21</div>
  </div>
  <div class="calendar__week">
    <div class="calendar__day day">22</div>
    <div class="calendar__day day">23</div>
    <div class="calendar__day day">24</div>
    <div class="calendar__day day">25</div>
    <div class="calendar__day day">26</div>
    <div class="calendar__day day">27</div>
    <div class="calendar__day day">28</div>
  </div>
</div>
</div>

.calendar__week,
.calendar__header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.calendar__week {
  grid-auto-rows: 6vw;
  text-align: right;
}

.different_month_days{
  background-color: #c1d5e0;
}


.event{
  grid-column: col 2 / span 4;
  grid-row: 2;
  background-color: aqua;
  border-radius: 5vw;
  text-align: left;
}



.calendar__header {
  grid-auto-rows: 3vw;
  align-items: center;
  text-align: center;
  font-family: Montserrat;
  background-color: #8f9bff;

}

.calendar__day {
  padding: 16px;
  font-family: Montserrat;
}

.calendar {
  background-color: white;
  border: 1px solid #e1e1e1;
}

.calendar__header > div {
  text-transform: uppercase;
  font-size: 1em;
  font-weight: bold;
}

.calendar__day {
  border-right: 1px solid  #e1e1e1;
  border-top: 1px solid #e1e1e1;

}

.calendar__day:last-child {
  border-right: 0;
}

已经感谢您的帮助

Answer 1

给你...

灵感来自 this代码笔。

我稍微更改了代码并使其响应更快，因为 codepen 上的源代码根本没有响应。彩色框和所有文本(星期几、数字和事件文本)现在都是响应式的。

我解决了您在调整窗口大小时事件未对齐的主要问题。现在，无论窗口大小如何，事件都完美对齐。

例如，带有 class='event--1' 的第一个事件从第三个框开始，并分布在接下来的两个框中，这是通过 grid-column: 3 完成的/跨度 2;。 class='event--2' 的第二个事件从第四个框开始，并分布在接下来的三个框中，这是通过 grid-column: 4/span 3; .

但是您还必须将这些已分配事件的框“放回原位”。对于第十五个框，这是使用以下 CSS 完成的:

div.date:nth-child(15) {
  grid-column: 3;
  grid-row: 3;
}

尝试从 CSS 中删除它，您就会明白这一点。

此外，我还使用了一点 Bootstrap 5 来垂直对齐星期几。

.days {
  font-size: 1.2vw;
  height: 8vh;
  font-weight: 700;
}

.main-content {
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: repeat(4, 35vh);
  grid-template-columns: repeat(7, minmax(calc(100vw/7), 1fr));
}

.date {
  background: var(--color);
  padding: 4%;
  position: relative;
  font-size: 1.3vw;
}

.event {
  z-index: 10;
  background: transparent;
  height: 10%;
  padding-top: 2.3vw;
}

.event--1 {
  grid-column: 3 / span 2;
  grid-row: 3;
}

.event--2 {
  grid-column: 4 / span 3;
  grid-row: 3;
  padding-top: 6vw;
}

.event__name {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 10vw;
  height: 2.5vh;
  padding: 10px;
  margin: 10px;
  font-size: 0.9vw;
}

div.date:nth-child(15) {
  grid-column: 3;
  grid-row: 3;
}

div.date:nth-child(16) {
  grid-column: 4;
  grid-row: 3;
}

div.date:nth-child(17) {
  grid-column: 5;
  grid-row: 3;
}

div.date:nth-child(18) {
  grid-column: 6;
  grid-row: 3;
}

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
</head>

<body>

  <div class='d-flex align-items-center days'>
    <div class='col text-center'>Monday</div>
    <div class='col text-center'>Tuesday</div>
    <div class='col text-center'>Wednesday</div>
    <div class='col text-center'>Thursday</div>
    <div class='col text-center'>Friday</div>
    <div class='col text-center'>Saturday</div>
    <div class='col text-center'>Sunday</div>
  </div>

  <div class='main-content'>
    <div class='date' style='--color:#db7f7a'>1</div>
    <div class='date' style='--color:#db847a'>2</div>
    <div class='date' style='--color:#db8d7a'>3</div>
    <div class='date' style='--color:#db8d7a'>4</div>
    <div class='date' style='--color:#db917a'>5</div>
    <div class='date' style='--color:#db967a'>6</div>
    <div class='date' style='--color:#db9a7a'>7</div>
    <div class='date' style='--color:#db9a7a'>8</div>
    <div class='date' style='--color:#db9f7a'>9</div>
    <div class='date' style='--color:#dba37a'>10</div>
    <div class='date' style='--color:#dba87a'>11</div>
    <div class='date' style='--color:#dbac7a'>12</div>
    <div class='date' style='--color:#dbb07a'>13</div>
    <div class='date' style='--color:#dbb57a'>14</div>
    <div class='date' style='--color:#dbbe7a'>15</div>
    <div class='date' style='--color:#dbc27a'>16</div>
    <div class='date' style='--color:#dbc77a'>17</div>
    <div class='date' style='--color:#dbd07a'>18</div>
    <div class='date' style='--color:#dbd47a'>19</div>
    <div class='date' style='--color:#dbd97a'>20</div>
    <div class='date' style='--color:#d9db7a'>21</div>
    <div class='date' style='--color:#d0db7a'>22</div>
    <div class='date' style='--color:#cbdb7a'>23</div>
    <div class='date' style='--color:#c7db7a'>24</div>
    <div class='date' style='--color:#c2db7a'>25</div>
    <div class='date' style='--color:#bedb7a'>26</div>
    <div class='date' style='--color:#b9db7a'>27</div>
    <div class='date' style='--color:#b5db7a'>28</div>

    <div class='event event--1'>
      <div class='event__name d-flex align-items-center justify-content-center'>Valentines party with Ames ❤️</div>
    </div>
    <div class='event event--2'>
      <div class='event__name d-flex align-items-center justify-content-center'>Die Hard binge weekend 😎</div>
    </div>
  </div>

</body>

</html>