Use css grid for main documentation layout

aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue

@@ -4,15 +4,12 @@
       <lesson-information v-bind="documentationPartProps" />
     </v-card-title>
 
-    <!-- flex-md-row zeile ab medium -->
-    <!-- align-stretch - stretch full-width -->
     <v-card-text
-      class="full-width d-flex flex-column align-stretch pa-2"
-      :class="{ 'flex-md-row': compact }"
+      class="full-width main-body pa-2"
+      :class="{ 'vertical': !compact || $vuetify.breakpoint.mobile }"
     >
-      <lesson-information v-if="compact" :class="{ 'flex-110': !$vuetify.breakpoint.mobile }" v-bind="documentationPartProps" />
+      <lesson-information v-if="compact" v-bind="documentationPartProps" />
       <lesson-summary
-        :class="{ 'flex-110': compact && !$vuetify.breakpoint.mobile }"
         ref="summary"
         v-bind="{ ...$attrs, ...documentationPartProps }"
         :is-create="false"
@@ -21,7 +18,7 @@
         @loading="loading = $event"
         @save="$emit('close')"
       />
-      <lesson-notes :class="{ 'flex-110': compact && !$vuetify.breakpoint.mobile }" v-bind="documentationPartProps" />
+      <lesson-notes v-bind="documentationPartProps" />
     </v-card-text>
     <v-divider />
     <v-card-actions v-if="!compact">
@@ -72,8 +69,12 @@ export default {
 </script>
 
 <style scoped>
-.flex-110 {
-  flex: 1 1 0;
-  width: 0;
+.main-body {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1em;
+}
+.vertical {
+  grid-template-columns: 1fr;
 }
 </style>