[Style] Change calendar layout from flex to grid

-import GridRow from "./GridRow.js";
 import { CalendarStateContext } from "../pages/Calendar";
 import { moveDate, toSunday } from "../utils/Dates";
 
 import React, { useContext } from "react";
+import GridItem from "./GridItem.js";
 
 const Grid = () => {
   const { state } = useContext(CalendarStateContext);
@@ -13,9 +13,9 @@ const Grid = () => {
     ndate.setDate(1);
     toSunday(ndate);
 
-    for (let i = 0; i < 5; i++) {
-      rows.push(<GridRow key={i} startDate={new Date(ndate)} />);
-      moveDate(ndate, "week", 1);
+    for (let i = 0; i < 35; i++) {
+      rows.push(<GridItem key={i} targetDate={new Date(ndate)} />);
+      moveDate(ndate, "day", 1);
     }
 
     return rows;

-import { moveDate } from "../utils/Dates";
-import GridItem from "./GridItem";
-
-const GridRow = ({ startDate }) => {
-  const renderItems = () => {
-    const items = [];
-    const ndate = new Date(startDate);
-
-    for (let i = 0; i < 7; i++) {
-      items.push(<GridItem key={i} targetDate={new Date(ndate)} />);
-      moveDate(ndate, "day", 1);
-    }
-
-    return items;
-  };
-
-  return <div className="GridRow">{renderItems()}</div>;
-};
-
-export default GridRow;

@@ -23,7 +23,6 @@
   padding: 10px 5px 10px 5px;
 }
 
-.GridRow,
 .GridHead {
   display: flex;
 }
@@ -33,8 +32,8 @@
 }
 
 .Grid {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   overflow-y: auto;
   height: calc(100vh - 85px - 50px);
   border: solid thin gray;