title: creating calendar with grid-temlate
body: <p>im trying to create a calendar with would like to look like a calendar. Buut i've got something missing because every created div's (days) are saved into the one and first cell. I dont know how to fix that. Thanks for any help
  css</p>
  <pre><code>.days-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      grid-template-rows: repeat(5, 1fr);
      height: 100%;
      position: relative;
      grid-column-gap: 1px;
      grid-row-gap: 1px;
      border-top: solid 1px;
  }
  
  .calendar-day {
      position: relative;
      min-height: 100px;
      font-size: 22px;
      padding: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: auto;
      height: 20px;
    }
  </code></pre>
  <pre><code>&lt;React.Fragment&gt;
              &lt;div className=&quot;calendar-month&quot;&gt;
                  &lt;CalendarHeader /&gt;
                  &lt;div className=&quot;days-grid&quot;&gt;
                      &lt;Month month={currentMonth} /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
     &lt;/React.Fragment&gt;
  </code></pre>
  <pre><code>function Month({ month }) {
      return (
          &lt;div&gt;
              {
                  month.map((row, i) =&gt; (
                      &lt;React.Fragment key={i}&gt;
                          {row.map((day, idx) =&gt; (
                              &lt;Day day={day} key={idx} /&gt;
                          ))}
                      &lt;/React.Fragment&gt;
                  ))
              }
          &lt;/div &gt;
      )
  }
  </code></pre>
  <pre><code>function Day({ day, rowIdx }) {
      return (
          &lt;div className=&quot;calendar-day&quot;&gt;
              {day.format()}
          &lt;/div&gt;
      )
  }
  </code></pre>