Use grid-based styling of statistics card

aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue

@@ -16,29 +16,29 @@
     </v-card-title>
 
     <v-card-text>
-      <div class="d-flex mb-4" style="gap: 1em">
+      <div class="grid">
         <statistics-absences-card
-          class="flex-grow-1"
+          style="grid-area: absences"
           :absence-reasons="statistics.absenceReasons"
           :loading="$apollo.loading"
         />
         <statistics-tardiness-card
-          class="flex-grow-1"
+          style="grid-area: tardinesses"
           :tardiness-sum="statistics.tardinessSum"
           :tardiness-count="statistics.tardinessCount"
           :loading="$apollo.loading"
         />
         <statistics-extra-marks-card
-          class="flex-grow-1"
+          style="grid-area: extra_marks"
           :extra-marks="statistics.extraMarks"
           :loading="$apollo.loading"
         />
+        <statistics-personal-notes-list
+          v-if="compact"
+          style="grid-area: personal_notes"
+          :loading="$apollo.loading"
+        />
       </div>
-      <statistics-personal-notes-list
-        v-if="compact"
-        class="flex-grow-1"
-        :loading="$apollo.loading"
-      />
     </v-card-text>
   </v-card>
 </template>
@@ -111,3 +111,14 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.grid {
+  display: grid;
+  max-width: 100%;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-areas: "absences  tardinesses  extra_marks"
+  "personal_notes  personal_notes  personal_notes";
+  gap: 0.5em;
+}
+</style>