Calendar 2 (CSS Grid)

by BelkinVadim

HTML

<div class="calendar" style="--weeks: 5;">
      <div class="calendar__day" style="--day: 5; --week: 1;">1</div>
      <div class="calendar__day" style="--day: 6; --week: 1;">2</div>
      <div class="calendar__day" style="--day: 7; --week: 1;">3</div>
      <div class="calendar__day" style="--day: 1; --week: 2;">4</div>
      <div class="calendar__day" style="--day: 2; --week: 2;">5</div>
      <div class="calendar__day" style="--day: 3; --week: 2;">6</div>
      <div class="calendar__day" style="--day: 4; --week: 2;">7</div>
      <div class="calendar__day" style="--day: 5; --week: 2;">8</div>
      <div class="calendar__day" style="--day: 6; --week: 2;">9</div>
      <div class="calendar__day" style="--day: 7; --week: 2;">10</div>
      <div class="calendar__day" style="--day: 1; --week: 3;">11</div>
      <div class="calendar__day" style="--day: 2; --week: 3;">12</div>
      <div class="calendar__day" style="--day: 3; --week: 3;">13</div>
      <div class="calendar__day" style="--day: 4; --week: 3;">14</div>
      <div class="calendar__day" style="--day: 5; --week: 3;">15</div>
      <div class="calendar__day" style="--day: 6; --week: 3;">16</div>
      <div class="calendar__day" style="--day: 7; --week: 3;">17</div>
      <div class="calendar__day" style="--day: 1; --week: 4;">18</div>
      <div class="calendar__day" style="--day: 2; --week: 4;">19</div>
      <div class="calendar__day" style="--day: 3; --week: 4;">20</div>
      <div class="calendar__day" style="--day: 4; --week: 4;">21</div>
      <div class="calendar__day" style="--day: 5; --week: 4;">22</div>
      <div class="calendar__day" style="--day: 6; --week: 4;">23</div>
      <div class="calendar__day" style="--day: 7; --week: 4;">24</div>
      <div class="calendar__day" style="--day: 1; --week: 5;">25</div>
      <div class="calendar__day" style="--day: 2; --week: 5;">26</div>
      <div class="calendar__day" style="--day: 3; --week: 5;">27</div>
      <div class="calendar__day" style="--day:...

CSS

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(var(--weeks), minmax(80px, min-content));
    overflow: hidden;
    border: 1px solid #999;
    border-radius: 5px;
  }

  .calendar__day {
    grid-column: var(--day) / span 1;
    grid-row: var(--week);
    padding: 10px;
    text-align: right;
    background-color: #fff;
    box-shadow: 0 0 0 1px #999;
  }
  
  .calendar__week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-column: 1 / span 7;
    grid-row: var(--week);
    grid-gap: 5px;
    grid-auto-flow: column;
    align-self: end;
    padding: 35px 5px 5px;
}
  
  .calendar__event {
    grid-column: var(--day) / span var(--duration);
    padding: 2px 5px;
    overflow: hidden;
    font-size: 12px;
    line-height: 15px;
    text-overflow: ellipsis;
    background-color: #007bff;
    color: #fff;
    border-radius: 3px;
  }