We need to make a calendar for December. The markup itself is already done. Styles remain.
An item with grid-container class should become a grid container.
The calendar should have 7 columns, the width of each should be determined automatically.
The height of each line that is added must be 4vh.
There must be a distance of 1vw between the cells of the calendar.
It only remains to indicate when the month begins. Let it be Wednesday.
Since the calendar has been counted since Sunday, the .month-start element beginning must be specified in column 4.

This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task

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>