Simplified grid-center

malthesers · Jan 30, 2024 · 9f875bf · 9f875bf
1 parent 7cda7cf
commit 9f875bf
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 5 deletions.
diff --git a/src/components/MovieCard.vue b/src/components/MovieCard.vue
@@ -6,7 +6,7 @@
     :class="{
       flipped: movie.id === firstMovie?.id || movie.id === secondMovie?.id || guessedMovies.includes(movie.title)
     }"
-    class="w-[60px] sm:w-[90px] md:w-[100px] aspect-[6/9] preserve-3d grid cursor-pointer duration-300 ease-in-out transform shadow-2xl *:size-full *:col-[1/1] *:row-[1/1] *:border-2 *:border-white"
+    class="w-[60px] sm:w-[90px] md:w-[100px] aspect-[6/9] preserve-3d grid cursor-pointer duration-300 ease-in-out transform shadow-2xl *:size-full *:grid-center *:border-2 *:border-white"
   >
     <!-- Back side -->
     <div class="bg-green-950 grid">

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -29,10 +29,8 @@ module.exports = {
           'backface-visibility': 'hidden'
         },
         '.grid-center': {
-          'grid-column-start': '1',
-          'grid-column-end': '1',
-          'grid-row-start': '1',
-          'grid-row-end': '1'
+          'grid-column': '1/1',
+          'grid-row': '1/1'
         }
       })
     }