Display: Align layout for tools in course home

assets/css/scss/course_home.scss

@@ -0,0 +1,5 @@
+.course-home {
+  &__tools {
+    @apply grid grid-cols-[repeat(auto-fill,_minmax(120px,_1fr))] gap-y-8 gap-x-20 mt-4;
+  }
+}

assets/css/scss/index.scss

@@ -57,6 +57,8 @@
 
 @import "admin_index";
 
+@import "course_home";
+
 @import 'login';
 
 @import 'forums';

assets/vue/views/course/CourseHome.vue

@@ -2,7 +2,7 @@
   <div
     v-if="course"
     id="course-home"
-    class="hide-content"
+    class="course-home"
   >
     <div
       v-if="isCourseLoading"
@@ -61,7 +61,7 @@
 
       <hr class="mt-0 mb-4" />
 
-      <div class="grid-cols-course-tools">
+      <div class="course-home__tools">
         <Skeleton
           v-for="v in 30"
           :key="v"
@@ -178,7 +178,7 @@
 
       <div
         id="course-tools"
-        class="grid-cols-course-tools"
+        class="course-home__tools"
       >
         <CourseTool
           v-for="(tool, index) in tools"

tailwind.config.js

@@ -64,9 +64,6 @@ module.exports = {
         caption: ["13px", "16px"],
         tiny: ["11px", "16px"],
       },
-      gridTemplateColumns: {
-        "course-tools": "repeat(auto-fit, 120px)",
-      },
     },
   },
   corePlugins: {