from flex to grid

Author: iernie

src/pages/Calendar/Calendar.module.css

@@ -9,29 +9,31 @@
 }
 
 .days {
-  display: flex;
-  flex-wrap: wrap;
+  container: days / inline-size;
+  display: grid;
   max-width: 51.5rem;
   margin: 0 auto;
   gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 }
 
-.hidden {
-  position: relative;
-  flex: 0 0 6.5rem;
-  opacity: 0;
-  visibility: hidden;
+.firstday {
+}
+
+@media only screen and (min-width: 824px) {
+  .firstday {
+    grid-column-start: attr(data-column-start);
+  }
 }
 
 .day {
   position: relative;
-  flex: 0 0 6.5rem;
   color: var(--white);
-  background-color: var(--grey-2);
   height: 6.5rem;
   width: 6.5rem;
   padding: 1.5rem 0 0 0;
-  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+  background: var(--grey-2)
+    url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
   font-size: 3rem;
   text-decoration: none;
 }

src/pages/Calendar/Calendar.tsx

@@ -33,8 +33,8 @@ const Calendar: React.FC = () => {
 
   const firstDayOfTheMonth =
     getDay(new Date(getYear(calendar.createdAt.toDate()), 11, 1)) === 0
-      ? 6
-      : getDay(new Date(getYear(calendar.createdAt.toDate()), 11, 1)) - 1;
+      ? 7
+      : getDay(new Date(getYear(calendar.createdAt.toDate()), 11, 1));
 
   return (
     <div className={styles.calendar}>
@@ -51,9 +51,6 @@ const Calendar: React.FC = () => {
         Innstillinger
       </ReactTooltip>
       <div className={styles.days}>
-        {Array.from(Array(firstDayOfTheMonth).keys()).map((day) => (
-          <div className={styles.hidden}>{day}</div>
-        ))}
         {Array.from(Array(24).keys()).map((day) => {
           const open =
             hotkey ||
@@ -74,6 +71,7 @@ const Calendar: React.FC = () => {
             [styles.winner]: winner !== undefined,
             [styles.open]: open && !winner,
             [styles.ignore]: ignoreWeekend,
+            [styles.firstday]: day === 0,
           });
 
           if (open && !winner && !ignoreWeekend) {
@@ -89,7 +87,11 @@ const Calendar: React.FC = () => {
           }
 
           return (
-            <div key={day + 1} className={dayClass}>
+            <div
+              key={day + 1}
+              className={dayClass}
+              data-column-start={day === 0 ? firstDayOfTheMonth : undefined}
+            >
               {winner && (
                 <div className={styles.avatar}>
                   <img