Надо сделать календарь на декабрь. Сама разметка уже готова. Остались стили.
Элемент с классом grid-container должен стать grid контейнером.
У календаря должно быть 7 колонок, ширина каждой должно определятся автоматически.
Высота каждой строчки, которая добавляется, должна быть 4vh.
Между клетками календаря должно быть расстояние 1vw.
Остается только указать, когда месяц начинается. Пусть это будет среда.
Поскольку счет в календаре ведется с воскресенья, нужно элементу .month-start указать колонку начала 4.

Эта задача — часть курса по Full-Stack JavaScript
Ты можешь задать свой вопрос в комментариях под постом
Если ты уже решил задачу, то не стесняйся помочь другим

Начни Учить Full-Stack JavaScript СЕЙЧАС!

index.html

<!DOCTYPE>
<html>
  <head>
    <title>Grid Calendar</title>
    <style>
      body {
        margin: 0;
      }
      h1 {
        font-family: Tahoma;
        font-style: italic;
        text-align: center;
      }
      .grid-container {
        height: 100vh;
        width: 100vw;
      }
      .grid-item {
        background-color: rgb(255, 198, 0);
        padding: 1vh 2vw;
        font-size: 2vh;
        font-style: italic;
        font-family: Tahoma;
        text-align: center;
      }
      .header {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>December</h1>
    <div class="grid-container">
      <div class="grid-item header">Sunday</div>
      <div class="grid-item header">Monday</div>
      <div class="grid-item header">Tuesday</div>
      <div class="grid-item header">Wednesday</div>
      <div class="grid-item header">Thursday</div>
      <div class="grid-item header">Friday</div>
      <div class="grid-item header">Saturday</div>
      <div class="grid-item month-start">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
      <div class="grid-item">7</div>
      <div class="grid-item">8</div>
      <div class="grid-item">9</div>
      <div class="grid-item">10</div>
      <div class="grid-item">11</div>
      <div class="grid-item">12</div>
      <div class="grid-item">13</div>
      <div class="grid-item">14</div>
      <div class="grid-item">15</div>
      <div class="grid-item">16</div>
      <div class="grid-item">17</div>
      <div class="grid-item">18</div>
      <div class="grid-item">19</div>
      <div class="grid-item">20</div>
      <div class="grid-item">21</div>
      <div class="grid-item">22</div>
      <div class="grid-item">23</div>
      <div class="grid-item">24</div>
      <div class="grid-item">25</div>
      <div class="grid-item">26</div>
      <div class="grid-item">27</div>
      <div class="grid-item">28</div>
      <div class="grid-item">29</div>
      <div class="grid-item">30</div>
      <div class="grid-item">31</div>
    </div>
  </body>
</html>